new FileReader() 是干嘛的 怎么用

new FileReader() 是干嘛的 怎么用

new FileReader() 是用于在客户端（浏览器）中异步读取文件内容的 JavaScript 内置对象。它提供了一种将文件内容读取到内存中以供处理的方式。你可以使用 FileReader 对象来读取不同类型的文件，例如文本文件、图像文件等。

以下是使用 FileReader 的基本步骤：

1. 创建一个 FileReader 实例：使用 new FileReader() 创建一个新的 FileReader 对象。

2. 设置事件处理程序：通过设置 onload 事件处理程序，当文件读取完成时，该处理程序将被调用，允许你访问读取的文件内容。

3. 选择文件和读取：使用文件输入框等方式让用户选择文件，然后通过调用 FileReader 的读取方法（如 readAsText()、readAsDataURL() 等）来读取文件内容。

以下是一个使用 FileReader 读取文本文件内容并在页面上显示的示例：

HTML：

<input type="file" id="fileInput">
<div id="output"></div>

JavaScript：

var fileInput = document.getElementById("fileInput");
var outputDiv = document.getElementById("output");

fileInput.addEventListener("change", function() {
    var file = this.files[0]; // 获取选择的文件
    var reader = new FileReader(); // 创建新的 FileReader 实例

    reader.onload = function(event) {
        var fileContent = event.target.result; // 获取文件内容
        outputDiv.textContent = fileContent; // 在页面上显示文件内容
    };

    reader.readAsText(file); // 以文本格式读取文件内容
});

在这个示例中，当用户选择一个文件后，change 事件被触发，然后代码会创建一个 FileReader 实例，设置 onload 事件处理程序，最后调用 readAsText() 方法以文本格式读取文件内容。当文件读取完成时，onload 事件处理程序被调用，然后将读取到的文件内容显示在页面上的 <div id="output"> 元素中。

要记住，实际应用中可能需要更多的错误处理和用户交互来提供更好的用户体验。FileReader 还可以用于读取其他类型的文件，如图像、音频、视频等，具体的使用方式会因文件类型而有所不同。