FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用
File或Blob对象指定要读取的文件或数据。
<!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) {
// 创建读取文件实例
var reader = new FileReader();
// 开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容。
reader.readAsDataURL(file);
// 开始读取指定的Blob中的内容。一旦完成，result属性中将包含所读取文件的原始二进制数据。
// reader.readAsBinaryString(e.target.files[0]);
// 开始读取指定的 Blob中的内容, 一旦完成, result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象.
// reader.readAsArrayBuffer(e.target.files[0])
// 开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个字符串以表示所读取的文件内容。
// reader.readAsText(e.target.files[0])
// 处理loadstart事件。该事件在读取操作开始时触发。
reader.onloadstart = function (e) {
console.log("开始")
console.log("onloadstart")
console.log(fileLength)
//中止读取操作
if (fileLength === 2) {
reader.abort()
}
if (fileLength === 3) {
throw "Too big";
}
}
// 处理error事件。该事件在读取操作发生错误时触发。
reader.onerror = function (e) {
// 一个DOMException，表示在读取文件时发生的错误
console.log(reader.error)
}
// 处理abort事件。该事件在读取操作被中断时触发
reader.onabort = function (e) {
console.log("onabort")
}
// 处理progress事件。该事件在读取Blob时触发。
reader.onprogress = function (e) {
console.log("onprogress")
}
// 处理load事件。该事件在读取操作完成时触发。
reader.onload = function (e) {
console.log("onload")
// 文件的内容。该属性仅在读取操作完成后才有效，数据的格式取决于使用哪个方法来启动读取操作。
// console.log(reader.result)
}
// 处理loadend事件。该事件在读取操作结束时（要么成功，要么失败）触发。
reader.onloadend = function (e) {
console.log(reader.readyState)
// 常量名 值 描述
// EMPTY 0 还没有加载任何数据.
// LOADING 1 数据正在被加载.
// DONE 2 已完成全部的读取请求.
console.log("onloadend")
};
}
// 读取多个文件
while (fileLength < files.length) {
console.log(`开始读取第${fileLength+1}文件`)
readFile(files[fileLength], fileLength)
fileLength++;
}
}
</script>
</html>
网友评论