上传---FileReader

 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切图传送门