fileReader對象允許Web應(yīng)用程序異步讀取存儲在用戶計算機上的文件(或原始數(shù)據(jù)緩沖區(qū))的內(nèi)容,使用File或Blob對象指定要讀取的文件或數(shù)據(jù)
其中File對象可以是來自用戶在一個input元素上選擇文件后返回的fileList對象,也可以來自拖放操作生成的dataTransfer對象,還可以是來自在一個HTMLCanvasElement上執(zhí)行mozGetAsFile()方法后返回結(jié)果
創(chuàng)建對象
let reader = new FileReader()
方法
reader.abort()
中斷讀取
reader.readAsArrayBuffer(file)
讀取結(jié)果是一個 ArrayBuffer 對象
reader.readAsBinaryString(file)
返回二進制文件
reader.readDataURL(file)
以 data: 開頭的字符串, 小文件格式可以直接插入 html
reader.readAsText(file[,encoding])
encoding 編碼格式
狀態(tài)
empty 數(shù)據(jù)為空
loading 數(shù)據(jù)加載中
done 已完成讀取
屬性
error 讀取文件是發(fā)生錯誤
readyState 讀取狀態(tài)
result 讀取到的文件內(nèi)容
事件
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 以上