FileReader 类型表示一种异步文件读取机制。可以把 FileReader 想象成类似于 XMLHttpRequest, 只不过是用于从文件系统读取文件,而不是从服务器读取数据。FileReader 类型提供了几个读取文件 数据的方法。
readAsText(file, encoding):从文件中读取纯文本内容并保存在 result 属性中。第二个 参数表示编码,是可选的。
readAsDataURL(file):读取文件并将内容的数据 URI 保存在 result 属性中。
readAsBinaryString(file):读取文件并将每个字符的二进制数据保存在 result 属性中。 readAsArrayBuffer(file):读取文件并将文件内容以
ArrayBuffer 形式保存在 result 属性。 这些读取数据的方法为处理文件数据提供了极大的灵活性。例如,为了向用户显示图片,可以将图
片读取为数据 URI,而为了解析文件内容,可以将文件读取为文本。 因为这些读取方法是异步的,所以每个 FileReader 会发布几个事件,其中 3 个最有用的事件是
属性,即使其中尚未包含全部数据。 18 error 事件会在由于某种原因无法读取文件时触发。触发 error 事件时,FileReader 的 error
属性会包含错误信息。这个属性是一个对象,只包含一个属性:code。这个错误码的值可能是 1(未找 到文件)、2(安全错误)、3(读取被中断)、4(文件不可读)或 5(编码错误)。
load 事件会在文件成功加载后触发。如果 error 事件被触发,则不会再触发 load 事件。下面的 例子演示了所有这 3 个事件:
progress、error 和 load,分别表示还有更多数据、发生了错误和读取完成。
progress 事件每 50 毫秒就会触发一次,其与 XHR 的 progress 事件具有相同的信息: lengthComputable、loaded和total。此外,在progress事件中可以读取FileReader的result
let filesList = document.getElementById("files-list");
filesList.addEventListener("change", (event) => {
let info = "",
output = document.getElementById("output"),
progress = document.getElementById("progress"), 21 files = event.target.files,
type = "default",
reader = new FileReader();
if (/image/.test(files[0].type)) {
reader.readAsDataURL(files[0]);
type = "image";
} else {
reader.readAsText(files[0]);
type = "text";
}
reader.onerror = function() {
output.innerHTML = "Could not read file, error code is " +
reader.error.code;
};
reader.onprogress = function(event) {
if (event.lengthComputable) {
progress.innerHTML = `${event.loaded}/${event.total}`;
}
};
reader.onload = function() {
let html = "";
switch(type) {
case "image":
html = `<img src="${reader.result}">`;
break; 28
case "text":
html = reader.result;
break;
}
output.innerHTML = html;
};
});
以上代码从表单字段中读取一个文件,并将其内容显示在了网页上。如果文件的 MIME 类型表示它 是一个图片,那么就将其读取后保存为数据 URI,在 load 事件触发时将数据 URI 作为图片插入页面中。 如果文件不是图片,则读取后将其保存为文本并原样输出到网页上。progress 事件用于跟踪和显示读 取文件的进度,而 error 事件用于监控错误。
如果想提前结束文件读取,则可以在过程中调用 abort()方法,从而触发 abort 事件。在 load、 error 和 abort 事件触发后,还会触发 loadend 事件。loadend 事件表示在上述 3 种情况下,所有读 取操作都已经结束。readAsText()和 readAsDataURL()方法已经得到了所有主流浏览器支持。
FileReaderSync类型
顾名思义,FileReaderSync 类型就是 FileReader 的同步版本。这个类型拥有与 FileReader 相同的方法,只有在整个文件都加载到内存之后才会继续执行。FileReaderSync 只在工作线程中可用, 因为如果读取整个文件耗时太长则会影响全局。
假设通过 postMessage()向工作线程发送了一个 File 对象。以下代码会让工作线程同步将文件 读取到内存中,然后将文件的数据 URL 发回来:
// worker.js
self.omessage = (messageEvent) => {
const syncReader = new FileReaderSync(); console.log(syncReader); // FileReaderSync {}
// 读取文件时阻塞工作线程
const result = syncReader.readAsDataUrl(messageEvent.data);
// PDF 文件的示例响应
console.log(result); // data:application/pdf;base64,JVBERi0xLjQK...
// 把URL发回去
self.postMessage(result);
};