【JS】前端文件读取FileReader操作总结

前端文件读取FileReader操作总结

FileReader 是 JavaScript 中的一个 Web API，它允许 web 应用程序异步读取用户盘算机上的文件（或原始数据缓冲区）的内容，例如读取文件以获取其内容，并在不将文件发送到服务器的环境下在客户端利用它。这对于处理图片、文本文件等非常有用，尤其是当你想要在用户界面中即时显示文件内容或举行文件预览时。
创建 FileReader 对象

首先，你必要创建一个 FileReader 的实例：

1. let reader = new FileReader();

复制代码

FileReader 的主要方法和事件

FileReader 提供了几个方法和一个事件用于读取文件和处理读取结果。
方法

• readAsArrayBuffer(file): 异步读取文件内容，并将结果作为一个 ArrayBuffer 对象返回。
  
• readAsBinaryString(file): 异步读取文件内容，并将结果作为二进制字符串返回（不保举利用，已被弃用）。
  
• readAsDataURL(file): 异步读取文件内容，并将结果作为一个表示文件内容的 DataURL 返回。这特别适用于图片文件，由于它可以直接被 <img> 标签的 src 属性利用。
  
• readAsText(file, [encoding]): 异步读取文件内容，并将结果作为文本字符串返回。你可以指定一个编码（默认为 ‘UTF-8’）。
  

事件

• onload: 当读取操作成功完成时触发。
  
• onerror: 当读取操作发生错误时触发。
  
• onabort: 当读取操作被中止时触发（可以通过调用 abort() 方法来中止）。
  
• onloadstart, onprogress, onloadend: 这些事件提供了读取操作的更多控制点，好比开始、进度和结束。
  

利用 FileReader 读取文件

以下是一个利用 FileReader 读取文件并将其内容作为文本显示在网页上的简朴示例：

1. <input type="file" id="fileInput">
2. <div id="output"></div>
4. <script>
5.   document.getElementById('fileInput').addEventListener('change', function(e) {
6.     const file = e.target.files[0];
7.     if (!file) {
8.       return;
9.     }
11.     const reader = new FileReader();
12.     reader.onload = function(e) {
13.       document.getElementById('output').textContent = e.target.result;
14.     };
15.     reader.onerror = function(error) {
16.       console.error('Error: ', error);
17.     };
19.     reader.readAsText(file);
20.   });
21. </script>

复制代码

注意点

• 读取文件是异步的，所以 FileReader 的方法（如 readAsText）会立即返回，不会等待文件读取完成。文件读取完成后，会触发 onload 事件。
  
• 出于安全考虑，欣赏器中的 FileReader 只能读取用户通过 <input type="file"> 或其他用户交互（如拖放）选择的文件。
  
• 利用 FileReader 时，请确保处理所有大概的错误环境，好比文件读取失败或文件为空。
  
• 对于大文件的处理，请注意性能和内存利用，大概必要利用更复杂的策略，如分片读取或流式处理。
  

FileReader对象的其他方法

FileReader对象是JavaScript中的一个重要API，它允许web应用程序异步读取存储在用户盘算机上的文件（或原始数据缓冲区）的内容。除了常见的readAsText、readAsDataURL和readAsArrayBuffer方法外，FileReader还提供了其他几个方法，尽管此中一些大概已不被保举利用。以下是对FileReader对象其他方法的介绍：
1. 已弃用的方法

• readAsBinaryString(file): 此方法用于将文件内容读取为二进制字符串，但必要注意的是，它已经被标记为弃用，并不建议在新代码中利用。由于二进制字符串并不是处理二进制数据的最佳方式，且在差别欣赏器和平台间大概存在兼容性题目。
  

2. 读取控制方法

• abort(): 此方法用于中止读取操作。如果读取操作尚未完成，调用此方法将制止读取并触发onabort事件。这对于必要取消长时间运行的文件读取操作非常有用。
  

3. 事件处理

虽然这些不是FileReader的直接方法，但事件处理是FileReader利用中不可或缺的一部分。FileReader实例支持一系列事件，用于处理读取过程中的差别阶段和状态：

• onloadstart: 在读取操作开始时触发。
  
• onprogress: 在读取过程中周期性触发，可以用来显示读取进度。
  
• onload: 在读取操作成功完成时触发。此时，可以通过FileReader的result属性访问读取到的文件内容。
  
• onloadend: 在读取操作结束时触发，无论操作是否成功。这是onload和onerror之后的最终事件。
  
• onerror: 在读取操作发生错误时触发。可以通过FileReader的error属性访问错误信息。
  

利用示例

以下是一个利用FileReader和它的事件处理方法的示例：

1. let input = document.querySelector('input[type="file"]');input.addEventListener('change', function(e) {    let file = e.target.files[0];    if (!file) {        return;    }    let reader = new FileReader();
2.     reader.onloadstart = function(e) {        console.log('读取开始');    };    reader.onprogress = function(e) {        if (e.lengthComputable) {            let percentComplete = (e.loaded / e.total) * 100;            console.log('读取进度: ' + percentComplete + '%');        }    };    reader.onload = function(e) {        console.log('读取成功');        // 利用读取到的文件内容，例如：        // document.getElementById('output').textContent = e.target.result;    };    reader.onerror = function(e) {        console.error('读取错误: ', e.target.error);    };    // 选择读取方法，例如：    reader.readAsText(file, 'UTF-8');    // 大概 reader.readAsDataURL(file);    // 大概 reader.readAsArrayBuffer(file);});

复制代码

注意事项

• 当利用FileReader时，请确保处理所有大概的事件，包罗成功、错误和中止。
  
• 读取文件是异步的，所以FileReader的方法会立即返回，不会等待文件读取完成。
  
• 出于安全考虑，FileReader只能读取用户通过用户交互（如点击或拖放）选择的文件。
  
• 对于大文件，请考虑利用onprogress事件来提供读取进度的反馈，并大概必要在读取过程中举行内存管理。
  

其他方法

FileReader 对象在 JavaScript 中主要用于异步读取文件内容，其主要的方法已经涵盖了大多数文件读取的场景。除了已经提到的 readAsText、readAsDataURL、readAsArrayBuffer（这些是常用的读取方法）以及已弃用的 readAsBinaryString 之外，FileReader 并没有其他直接用于读取文件内容的方法。
然而，FileReader 对象提供了几个用于控制读取过程和处理读取结果的事件方法，这些虽然不是直接用于读取文件内容的“方法”，但在文件读取过程中饰演着重要角色。这些事件方法包罗：

• onloadstart：当读取操作开始时触发。
  
• onprogress：在读取过程中定期触发，可以用来显示读取进度。
  
• onload：当读取操作成功完成时触发。此时，可以通过 FileReader 的 result 属性访问读取到的文件内容。
  
• onloadend：在读取操作结束时触发，无论操作是否成功。
  
• onerror：当读取操作发生错误时触发。
  
• onabort：当读取操作被中止时触发（可以通过调用 abort() 方法来中止）。
  

在现实利用中，通常会联合这些事件方法来处理文件读取的差别阶段和结果。
别的，虽然 FileReader 自己没有提供其他读取文件内容的方法，但你可以通过联合其他 JavaScript API（如 File API、Blob API、URL.createObjectURL() 等）来实现更复杂的文件处理功能。例如，你可以利用 Blob 对象来处理二进制数据，大概利用 URL.createObjectURL() 来创建一个指向文件内容的 URL，然后将其用于 <img>、<audio> 或 <video> 等标签的 src 属性中。
总的来说，FileReader 提供了机动且强大的文件读取能力，通过联合其提供的方法和事件，你可以实现各种文件处理功能。对于更复杂的文件处理需求，你大概必要联合利用多个 JavaScript API 和技术。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。