本教程详细介绍了如何使用javascript的`filereader` api从html文件输入元素中读取本地文件内容。文章重点阐述了`filereader`的异步特性，并指导开发者如何通过监听`load`事件来正确获取文件数据，避免常见的`undefined`错误。通过提供清晰的示例代码和注意事项，确保读者能够高效、准确地在客户端处理本地文件。
引言：理解FileReader API
在现代Web应用开发中，经常需要允许用户上传本地文件（如图片、文本文件、模型数据等）并在客户端进行预览或处理。JavaScript的FileReader API正是为此目的而设计，它允许Web应用程序异步读取用户计算机上存储的文件（或原始数据缓冲区）的内容。这对于构建交互式、富客户端的Web应用至关重要。
FileReader的异步机制与常见陷阱
许多初学者在使用FileReader时，会遇到一个常见的困惑：为什么调用readAsText()等方法后，尝试立即访问其返回值或reader.result会得到undefined？这是因为FileReader的所有读取操作都是异步的。
readAsText()方法并不会立即返回文件内容，它只是启动一个文件读取过程。文件内容的实际读取和解析需要一定时间。在读取完成之前，reader.result属性是空的，并且readAsText()方法本身没有返回值（因此默认为undefined）。
以下是可能导致困惑的错误示例代码：
立即学习“Java免费学习笔记（深入）”；
function loadFiles(){
const fileList = modelImport.files;
const reader = new FileReader();
for(let i=0; i<fileList.length; i++){
// 错误：readAsText()是异步的，不直接返回文件内容
var text = reader.readAsText(fileList[i]);
console.log(text); // 此时会打印 "undefined"
}
}
const modelImport = document.getElementById("modelImport");
modelImport.addEventListener("change", loadFiles);正确姿势：通过load事件获取文件内容
要正确获取FileReader读取的文件内容，必须监听FileReader对象上触发的load事件。当文件读取操作成功完成时，load事件就会被触发，此时文件内容将通过reader.result属性提供。
下面是使用load事件的正确实现方式：
HTML结构：
首先，我们需要一个HTML <input type="file"> 元素，用于用户选择文件。为了支持多文件选择和指定文件类型，可以添加multiple和accept属性。
<input type="file" id="modelImport" name="modelImport" accept=".obj" multiple>
JavaScript代码：
function loadFiles() {
const fileList = document.getElementById("modelImport").files; // 获取文件列表
// 遍历用户选择的每一个文件
for (let i = 0; i < fileList.length; i++) {
const file = fileList[i];
const reader = new FileReader(); // 为每个文件创建一个新的FileReader实例
// 监听FileReader的'load'事件
reader.addEventListener(
"load",
function() {
// 当文件读取完成时，文件内容在reader.result中可用
console.log(`文件 "${file.name}" 的内容:`);
console.log(reader.result);
// 在这里可以对reader.result进行进一步处理，例如显示、解析等
},
false
);
// 启动文件读取操作，将文件内容读取为文本
reader.readAsText(file);
}
}
// 获取文件输入元素并为其添加'change'事件监听器
const modelImport = document.getElementById("modelImport");
modelImport.addEventListener("change", loadFiles);代码解析：
- document.getElementById("modelImport").files: 获取用户通过文件输入框选择的文件列表（一个FileList对象）。
- for (let i = 0; i < fileList.length; i++): 遍历FileList中的每一个文件。对于每个文件，我们都需要单独处理。
- const reader = new FileReader();: 关键点。为了避免异步操作之间的冲突和混淆，最佳实践是为每个要读取的文件创建一个独立的FileReader实例。这样可以确保每个文件的load事件和reader.result都与对应的文件绑定。
- reader.addEventListener("load", function() { ... });: 这是处理文件内容的核心。当reader.readAsText()方法成功完成读取操作后，load事件会被触发。事件处理函数内部，reader.result属性将包含文件的全部文本内容。
- reader.readAsText(file);: 启动异步读取操作。它告诉FileReader将指定的文件内容读取为纯文本字符串。
进阶用法与注意事项
除了readAsText()和load事件，FileReader API还提供了其他有用的功能和事件：
-
其他读取方法：
- readAsDataURL(file): 将文件内容读取为Data URL，常用于图片预览。
- readAsArrayBuffer(file): 将文件内容读取为ArrayBuffer，适用于处理二进制数据。
- readAsBinaryString(file): 将文件内容读取为二进制字符串（已废弃，推荐使用readAsArrayBuffer）。
-
错误处理：
- 监听error事件：当读取文件发生错误时，error事件会被触发。可以通过reader.error属性获取错误信息。
reader.addEventListener("error", function() { console.error("文件读取失败:", reader.error); });
- 监听error事件：当读取文件发生错误时，error事件会被触发。可以通过reader.error属性获取错误信息。
-
进度跟踪：
- 监听progress事件：在读取过程中，progress事件会周期性触发，可以用于显示读取进度。
-
中止读取：
- reader.abort(): 可以随时中止正在进行的读取操作。
-
安全性：
- FileReader只能读取用户明确选择的文件，无法访问用户文件系统中的任意文件。
- 所有操作都在客户端进行，文件内容不会自动发送到服务器。如果需要上传，则需要额外的网络请求。
总结
FileReader API是Web应用中处理本地文件不可或缺的工具。理解其异步工作原理是正确使用的关键。始终记住，readAsText()等读取方法是异步的，文件内容必须通过监听load事件并在事件回调函数中访问reader.result来获取。通过为每个文件创建独立的FileReader实例，并结合适当的事件监听，开发者可以高效且可靠地在客户端处理各种类型的文件数据。
