FileReader 對(duì)象允許Web應(yīng)用程序異步讀取存儲(chǔ)在用戶計(jì)算機(jī)上的文件（或原始數(shù)據(jù)緩沖區(qū)）的內(nèi)容卿樱，使用
File或Blob對(duì)象指定要讀取的文件或數(shù)據(jù)握牧。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FileReader</title>
</head>
<body>
<!-- <input type="file" name="" id="chooseImage" accept=".jpg,.jpeg,.png"> -->
<input type="file" name="" id="chooseImage" multiple>
<img id="showImg" src="">
</body>
<script>
document.getElementById("chooseImage").onchange = function (e) {
const files = e.target.files
let fileLength = 0;
console.log("開始")
console.log(files.length)
function readFile(file, fileLength) {
// 創(chuàng)建讀取文件實(shí)例
var reader = new FileReader();
// 開始讀取指定的Blob中的內(nèi)容。一旦完成孽惰，result屬性中將包含一個(gè)data: URL格式的Base64字符串以表示所讀取文件的內(nèi)容。
reader.readAsDataURL(file);
// 開始讀取指定的Blob中的內(nèi)容。一旦完成赠法，result屬性中將包含所讀取文件的原始二進(jìn)制數(shù)據(jù)。
// reader.readAsBinaryString(e.target.files[0]);
// 開始讀取指定的 Blob中的內(nèi)容, 一旦完成, result 屬性中保存的將是被讀取文件的 ArrayBuffer 數(shù)據(jù)對(duì)象.
// reader.readAsArrayBuffer(e.target.files[0])
// 開始讀取指定的Blob中的內(nèi)容乔夯。一旦完成砖织，result屬性中將包含一個(gè)字符串以表示所讀取的文件內(nèi)容。
// reader.readAsText(e.target.files[0])
// 處理loadstart事件末荐。該事件在讀取操作開始時(shí)觸發(fā)侧纯。
reader.onloadstart = function (e) {
console.log("開始")
console.log("onloadstart")
console.log(fileLength)
//中止讀取操作
if (fileLength === 2) {
reader.abort()
}
if (fileLength === 3) {
throw "Too big";
}
}
// 處理error事件。該事件在讀取操作發(fā)生錯(cuò)誤時(shí)觸發(fā)甲脏。
reader.onerror = function (e) {
// 一個(gè)DOMException眶熬，表示在讀取文件時(shí)發(fā)生的錯(cuò)誤
console.log(reader.error)
}
// 處理abort事件。該事件在讀取操作被中斷時(shí)觸發(fā)
reader.onabort = function (e) {
console.log("onabort")
}
// 處理progress事件块请。該事件在讀取Blob時(shí)觸發(fā)娜氏。
reader.onprogress = function (e) {
console.log("onprogress")
}
// 處理load事件。該事件在讀取操作完成時(shí)觸發(fā)墩新。
reader.onload = function (e) {
console.log("onload")
// 文件的內(nèi)容贸弥。該屬性僅在讀取操作完成后才有效，數(shù)據(jù)的格式取決于使用哪個(gè)方法來(lái)啟動(dòng)讀取操作海渊。
// console.log(reader.result)
}
// 處理loadend事件绵疲。該事件在讀取操作結(jié)束時(shí)（要么成功哲鸳，要么失敗）觸發(fā)最岗。
reader.onloadend = function (e) {
console.log(reader.readyState)
// 常量名 值 描述
// EMPTY 0 還沒有加載任何數(shù)據(jù).
// LOADING 1 數(shù)據(jù)正在被加載.
// DONE 2 已完成全部的讀取請(qǐng)求.
console.log("onloadend")
};
}
// 讀取多個(gè)文件
while (fileLength < files.length) {
console.log(`開始讀取第${fileLength+1}文件`)
readFile(files[fileLength], fileLength)
fileLength++;
}
}
</script>
</html>
