FileReader

fileReader对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用File或Blob对象指定要读取的文件或数据

其中File对象可以是来自用户在一个input元素上选择文件后返回的fileList对象,也可以来自拖放操作生成的dataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果

创建对象

let reader = new FileReader()

方法

reader.abort()
中断读取

reader.readAsArrayBuffer(file)
读取结果是一个 ArrayBuffer 对象

reader.readAsBinaryString(file)
返回二进制文件

reader.readDataURL(file)
以 data: 开头的字符串, 小文件格式可以直接插入 html

reader.readAsText(file[,encoding])
encoding 编码格式

状态

empty 数据为空

loading 数据加载中

done 已完成读取

属性

error 读取文件是发生错误

readyState 读取状态

result 读取到的文件内容

事件

onabort

onerror

onload

onloadstart

onloadend

onpropress

例子

reader = newFileReader()
reader.onload = function (e) {
  document.getElementById("uploadPreview").src=e.target.result
}
var oFile=document.getElementById("uploadImage").files[0]
reader.readAsDataURL(oFile)

兼容

IE 9 以上