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 以上