FileReader允许web应用程序异步读取存储在用户计算机上的文件的内容。
使用File 或 Bolb 对象指定要读取的文件或数据。
file对象可以是来自<input type="file" /> 选中的文件(拥有files属性，由传入的file对象组成)，也可以是来自拖放操作的DataTransfer对象。
1、创建FileReader对象
var reader = new FileReader()
2、方法
reader.abort（） 终止读取操作， 在返回时，readyState = 'DONE'
reader.readAsArrayBuffer(file) 按字节读取文件内容，result属性为ArrayBuffer对象表示
reader.readAsBinaryString(file) 按字节读取文件，result属性为文件的二进制串
reader.readAsDataURL(file) result属性为 data：url 格式的字符串，即转为了base64
reader.readAsText(file) result属性为一个字符串表示读取到的内容
3、事件
reader.onabort() 处理abort事件，读取中断时触发
reader.onerror() 读取发生错误时触发
reader.onload() 读取完成时触发
reader.onloadstart() 读取开始时触发
reader.onloadend() 读取结束时（要么成功，要么失败）触发
reader.onprogress() 读取Blob时触发
FileReader继承自EventTarget，所以可以通过addEventListener方法使用
4、属性
reader.error 读取文件时发生的错误
reader.readyState 表示状态的数字
EMPTY 0 还没有加载任何数据
LOADING 1 数据正在被加载
DONE 2 已完成全部的读取请求
reader.result 读取到的文件内容
例子：
<input type="file" accept=".png" onchange="saveImg" />
<img src="" alt="图片" id="picture">
function saveImg(e) {
let file = e.target.files[0];
let reader = new FileReader()；
reader.readAsDataURL(file)；
reader.onload= function(){
if(this.result) {
document.getElementById('picture').setAttribute('src', this.result)
}
}
}