JavaScript实现图片上传时前端显示

JavaScript / 2022年3月3日 / hamster

HTML代码

    <div class="mb-3">
        <label for="time" class="form-label">肖像:</label>
        <div class="imageShow"></div>
        <div class="input-group">
            <input type="file" class="form-control" name="image">
        </div>
    </div>

js代码

    $("input[name='image']").change(function () {
        var img = new FileReader();
        var f = $(this).get(0).files[0];
        var reg = "/jpeg/png/gif/bmp/";
        var imgType = f.type.split("/")[1];
        console.log(reg, imgType);

        //检验图片是否符合要求
        if(reg.indexOf(imgType) != -1){
            img.readAsDataURL(f);
            img.onload = function (e) {
                $(".imageShow").html("<img style='height: 160px;width: auto;' src='" + this.result +"'>")
            }
        }
    });

FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容。

#调用方法
readAsBinaryString  #将文件读取为二进制码
readAsDataURL       #将文件读取为 DataURL
readAsText          #将文件读取为文本

#事件处理
onabort      #中断时触发
onerror      #出错时触发
onload       #文件读取成功完成时触发
onloadend    #读取完成触发，无论成功或失败
onloadstart  #读取开始时触发
onprogress   #读取中