图片上传实时预览

创建于 10个月前 / 阅读数 172 / 前端


简介

在前端通过 form 表单上传图片时,默认只会显示一个文件名,可以通过以下方式对上传图片进行实时预览,注意 form 中添加属性 multipart/form-data , 后端接受方式和之前一致,读取显时,读取图片地址进预览框即可。

接下来简单的代码演示 :smile:

HTML

<img class="media-object thumbnail" id="preview" src="{{ $user -> avatar }}" alt="{{ $user -> realname }}" width="200">
<input type="file" name="avatar" onchange="imgPreview(this)">

JS

function imgPreview(fileDom){

    //判断是否支持 FileReader
    if (window.FileReader) {
        var reader = new FileReader();
    } else {
        alert("您的设备不支持图片预览功能,如需该功能请升级您的设备!");
    }

    //获取文件
    let file = fileDom.files[0];
    let imageType = /^image\//;

    //是否是图片
    if (!imageType.test(file.type)) {
        alert("请选择图片!");
        return;
    }

    //读取完成
    reader.onload = function (e) {
        //获取图片dom
        var name = fileDom.name;
        // 这里换了原生写法
        var img = document.getElementById('preview');
        //图片路径设置为读取的图片
        img.src = e.target.result;
    };

    reader.readAsDataURL(file);
}

说明:验证判断的细节可以根据个人喜好自行修改