实现一个选择多张图片预览并上传的功能

实现步骤

1、因为我们实现该功能依赖FileReader对象，需要先判断一下浏览器是否支持该对象。typeof应该为function，如果为undefined则说明不支持FileReader，这里选择禁用表单。

if(typeof FileReader === "undefined"){
    input.attr("disabled","disabled");
}

2、选择文件触发input的change事件，在回调中可以通过该事件对象获得了一个包含所有选择文件的FileList类型对象。

<input type="file" name="imgfile" id="file" multiple="multiple" accept="image/jpeg,image/jpg,image/png"/>
$("input").on("change",function(e){
    console.log(e.target.files);
    //console.log(this.files);
    console.log(Object.prototype.toString.call(this.files)); //[object FileList]
})

• multiple：支持多选

• accept：允许选择的文件类型

• 如果回调是像代码中那样的function声明的函数，可以直接使用this.files获取。（箭头函数不可以，这里需要理解其中this的指向问题）

• FileList对象具体信息如下图

FileList.png

3、FileReader()是一种异步文件读取机制,提供了以下方法，这里我们用了readAsDataURL方法

• readAsText(file,encoding)：读取到的文件的文本信息，保存到result属性中。第二个参数可选用于指定编码类型

• readAsDataURL：读取文件，将文件以数据URI的形式保存在result属性中，Base64位编码。

• readAsBinaryString(file)：将一个字符串保存在result属性中，字符串中的每个字符表示一个字节

• readAsArrayBuffer(file)：将一个包含文件内容的ArrayBuffer保存在result中

var reader = new FileReader();
reader.readAsDataURL(this.files[0]);

4、 FileReader同时提供了几个监听事件，这里主要使用onload事件，如果要使代码健壮，可以对各种情况做处理。

• onabort：读取操作被中断触发

• onerror：读取发生错误时触发

• onload：读取完成触发，事件对象中获取result字段就是读取的内容。

• onloadstart：读取开始时触发

• onloadend：读取结束时触发，无论成功失败。

• onprogress：处理progress事件，在读取Blob时触发。

reader.onload = function(e){          
    console.log(e.target.result);  // 图片的base64编码格式
}

完整代码

<input type="file" name="imgfile" id="file" multiple="multiple" accept="image/jpeg,image/jpg,image/png"/>
<ul id="imglist"></ul>

if(typeof FileReader === "undefined"){
    input.attr("disabled","disabled");
}
else{
    //选择文件触发change事件
    let imgArr = [];
    input.on("change",function(){
        for(var i = 0; i < this.files.length; i++){
            // 判断文件类型
            var end = this.files[i].type.split('/')[1];
            if (end == "png" || end == "jpeg" || end == "jpg"){
                var reader = new FileReader();
                reader.readAsDataURL(this.files[i]); //读取文件
                reader.onload = function(e){        //读取完成回调        
                    imgBase = e.target.result;
                    imgArr.push(imgBase);
                    let result = $("<li>" + 
                          "<img src='" + imgBase  + "'/>" + 
                          "<span class='close'>" + "</span>" + 
                    "</li>");
                    $("#imglist").prepend(result);
                }
            }
            else{
                alert("文件格式不正确");
            }       
        }
    });
}
// 最后提交的时候，把所有文件的数组一起提交

补充

---

1、获取图片的本地路径

上面是通过把读取出来的base64编码添加到<img>上实现本地预览，这是很久以前我不知道其他方法时候的实现方式，还可以通过URL.createObjectURL()方法直接获取到文件的本地路径。

input.on("change",function(files){
    const imgURL = window.URL.createObjectURL(files[0]);  //获取到的就是图片的路径
})