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数据读取完成时触发,无论读取成功还是失败