input:file 选择多个文件 用FileReader读取为二进制

Posted 2020-10-12

1.http://blog.csdn.net/jackfrued/article/details/8967667 关于FileReader的详细API

2.关于<input type="file" multiple> multiple 是html5的新属性，multiple属性规定输入字段可选择多个值。如果使用该属性，则字段可接受多个值。

3.用onchange事件来捕捉到选择上传的文件  event对象 event.target.files 这个就是你上传文件的各种属性 这是一个伪数组  其实是一个对象；

4.创建FileReader对象 读取文件第一个文件的时候 new FileReader().readAsDataURL(event.target.files[0])；

5.读取完成会触发onload事件 在onload事件里边继续调用 new FileReader().readAsDataURL(event.target.files[1])；

6.就会再次触发onload事件 这样直到所有的文件都被读取完；

 function uploadMulFile(uploadFile) {
    var fileLength = 0;
     var reader = new FileReader();
     reader.readAsDataURL(uploadFile[fileLength]);
   reader.onabort = function(e) {
         console.log("文件读取异常" + uploadFile[fileLength].name);
   };
     reader.onerror = function(e) {
         console.log("文件读取出现错误" + uploadFile[fileLength].name);
     };
     reader.onload = function(e) {
        if(e.target.result) {
            console.log("完成" + uploadFile[fileLength].name);
           fileLength++;
             if(fileLength < uploadFile.length) {
           reader.readAsDataURL(uploadFile[fileLength]);
           } else {
            //do something
             }
        }
     };
 }