当 Web 应用程序需要从本地计算机中读取文件时，通常需要使用 FileReader 对象。FileReader 是 Web API 中的一种对象，允许 JavaScript 代码异步读取存储在用户计算机上的任意文件。
在本文中，我们将介绍如何使用 FileReader 对象从本地文件系统中读取数据，并以此为基础创建一个简单的示例应用程序。首先，我们将探讨 FileReader 的基本语法和用法，然后提供一个演示如何使用它来读取图片文件并显示该图片的示例。
FileReader 的基本语法和用法
FileReader 是原生 JavaScript 对象，可以使用以下构造函数创建：
var reader = new FileReader();
FileReader 对象通常通过 readAs... 方法对指定的本地文件进行读取。可用的 readAs... 方法有以下几种：
readAsText(file[, encoding]): 将文件内容读取为文本字符串。encoding参数是可选的，在不指定时默认使用 UTF-8 编码。readAsDataURL(file): 将文件内容读取为 Base64 编码的 Data URL 字符串。readAsArrayBuffer(file): 将文件内容读取为包含二进制数据的ArrayBuffer对象。
例如，要将一个文件读取为文本字符串，可以编写以下代码：
javascript复制代码
var reader = new FileReader();
reader.readAsText(file, 'utf-8');
在上面的代码示例中，我们创建了一个 FileReader 实例，并调用了其 readAsText 方法来异步读取给定的文件（file）。此方法可以接受一个可选的第二个参数，以指定文本字符编码。读取操作完成后，可以检查 reader.result 属性来获取读取的内容。
FileReader 对象在读取文件时会触发多个事件，您可以通过监听这些事件来跟踪和处理读取进度、状态和可能的错误。例如：
var reader = new FileReader();
reader.onerror = function(evt) {
// 处理错误事件
}
reader.onprogress = function(evt) {
// 处理读取进度事件
}
reader.onload = function(evt) {
var fileContents = evt.target.result;
// 处理读取完毕事件
}
reader.readAsText(file);
在上述代码中，我们为 reader 实例定义了三个事件监听函数，分别是 onerror、onprogress 和 onload。这些事件会在读取文件过程中不断被触发，以便通知应用程序不同的文件读取阶段。例如，onprogress 事件会在读取文件数据时持续地触发以报告读取进度。
最后，在使用 FileReader 完成文件读取后，需要及时释放相关资源以避免内存泄漏。我们应该认真处理 FileReader 的生命周期。
读取图片文件并显示图片的示例
让我们通过一个示例来演示 FileReader 如何读取图片文件。此示例将使用 readAsDataURL 方法来读取图像，并在页面上显示它。
HTML 代码：
<input type="file" id="input" />
JavaScript 代码：
var inputElement = document.getElementById("input");
var reader = new FileReader();
reader.onload = function(evt) {
var imageElement = new Image();
imageElement.src = evt.target.result;
document.body.appendChild(imageElement);
};
inputElement.addEventListener("change", function() {
var file = inputElement.files[0];
reader.readAsDataURL(file);
});
当用户选择一个图片后，change 事件会被触发并调用 FileReader 实例的 readAsDataURL 方法来读取图像的二进制数据。在异步读取完成时，onload 事件将被触发并创建一个新的 Image 对象，并将其定义为 DataURL 字符串。listener 函数将该图像标签添加到文档 body 元素中。
这样，一个简单的只能读取图像文件的应用程序就完成了。
扩展
FileReader类型表示一种异步文件读取机制，有一个FileReaderSync类型顾名思义就是FileReader的同步版本。它拥有与FileReader相同的方法，只有在整个文件都加载完成内存才会继续执行
总结
本文已经介绍了 FileReader 对象的基本语法和用法，并提供了一个用于读取和显示图像文件的示例程序。虽然 FileReader 是一种强大且适用于各种用例的 API，但与所有 Web API 一样，开发人员需要注意实现兼容性、错误处理、性能优化和安全等方面的最佳实践。
