let input=document.querySelector('#input)
input.onchange=function(){
// 1.获取文件
// 此时this指input,console.dir(this) this身上的相关方法,files中就是上传的文件
// fl1可以获取文件名称,大小,类型等
let fl1 = this.files[0];
// 2.创建读取文件对象
let fReader = new FileReader();
// 3.读取文件
fReader.readAsText(fl1);
// 4.文件读取事件
fReader.onload=function(){
// 获取读取文件结果
let result = fReader.result;
}
// 开始
fReader.onloadstart=function(){
console.log(1)
}
// 结束
fReader.onloadend=function(){
console.log(2)
}
// 进行中 处理progress事件。该事件在读取Blob时触发
fReader.onprogress=function(){
console.dir('onprogress')
}
// 被中断
fReader.onabort=function(){
console.log(456)
}
// 发生错误
fReader.onerror=function(){
console.log(789)
}
fReader.onload=function(){
console.log('onload')
}
}
-
要先创建new FileReader对象来读取文件
-
通过fReader.readAsText(fl1)来读取上传的文件(readAsText是读取文本)
-
onloadstart,onload,onloadend,onabort,onerror各个环节对应触发事件
fReader.readAsArrayBuffer()
- 用来处理文件比较大的文件,可以进行切片处理传送门
fReader.readAsBinaryString()
- 2012年已被废除
fReader.readAsDataURL()
- 用于处理图片,base64
fReader.readAsText()
- 读取文本,限制300K,因为读取是将文件临时加载到内存中,太大浏览器会崩掉
fReader.readAsBlob()
- 待补充
FileReader传送门
blob和file互转,canvas切图传送门