使用FileReader对象进行文件操作

FileReader对象，用于把文件读入内存，并且读取文件中的数据。

 <input type="file" id="file" multiple>
    <!-- 添加multiple属性就可以提交多个文件 --> 
    <input type="button" id="btn" value="提交">

        btn.onclick = function () {
            var list = file.files;
            console.log(list[0])
            for (var i = 0; i < list.length; i++) {
                if (list[i].type == "image/jpeg") {
                    console.log("上传成功！")
                    var reader = new FileReader();
                    reader.readAsDataURL(list[i]);
                    reader.onload = function () {
                        console.log(reader.result);
                    }
                };
                if (list[i].type == "text/plain") {
                    console.log("上传文本！")
                    var reader = new FileReader();
                    reader.readAsBinaryString(list[i]);
                    reader.onload = function () {
                        console.log(reader.result);
                    }
                    
                    reader.onloadstart = function () {
                        console.log("开始读取");
                    }
                    reader.onloadend = function () {
                        console.log("读取结束");
                    }
                    
                }
            }
        }

FileReader对象的方法

• readAsText 将文件中的数据读取为文本数据
• readAsBinaryString 读取为二进制字符串（读取的文件中含有中文的话会有乱码）
• readAsDataURL 读取为DataURL字符串(base64)，用于图片
• readAsArrayBuffer 读取为一个ArrayBuffer对象
• abort方法，中断读取操作

FileReader对象的事件

• onabort 读取中断时触发
• onprogress数据读取过程中触发
• onerror读取出错时触发
• onload读取完成时触发
• onloadstart数据开始读取时触发
• onloadend数据读取完成时触发，无论读取成功还是失败