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

🕗 发布于 2024-07-27 13:08 前端 javascript 开发语言

前端文件读取FileReader操作总结

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

创建 FileReader 对象

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

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 读取文件并将其内容作为文本显示在网页上的简单示例：

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

<script>
  document.getElementById('fileInput').addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (!file) {
      return;
    }

    const reader = new FileReader();
    reader.onload = function(e) {
      document.getElementById('output').textContent = e.target.result;
    };
    reader.onerror = function(error) {
      console.error('Error: ', error);
    };

    reader.readAsText(file);
  });
</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和它的事件处理方法的示例：

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();

    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 和技术。

原文地址：https://blog.csdn.net/2401_82471222/article/details/140705077

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：IDEA-安装插件驼峰下划线转换
下一篇：JESD204B学习与仿真

linux线程cp模型，posix信号量，线程池，线程封装，单例模型，懒汉饿汉实现方式，自旋锁，读者写者模型
前面的同步，我们并没有一个很好的场景来模拟同步，只是简单的将有序的现象输出出来；现在我们来讲解一个比较合理且常见的模型——生产者消费者模型；
阅读更多2024-09-07
Qt/C++开源项目 TCP服务器调试助手（源码分享+发布链接下载）
该TCP服务器调试助手是用于测试和监控基于TCP协议的网络通信工具，能够帮助开发者便捷地进行网络通信调试。通过简洁的界面设计，用户可以轻松配置、管理TCP端口的连接，收发消息并进行数据监控分析。123
阅读更多2024-09-07
vue3整合antv x6实现图编辑器快速入门
例如：在上面节点基础上，我们有一个新的需求：给节点加上右键菜单。X6 支持使用 SVG、HTML 来渲染节点内容，在此基础上，我们还可以使用 React、Vue 组件来渲染节点，这样在开发过程中会非常
阅读更多2024-09-07
linux使用samba共享目录，其他虚拟机和windows都可以访问
linux使用samba共享目录，其他虚拟机和windows都可以访问
阅读更多2024-09-07
Linux系统编程实现ls -l | wc -l指令
由于该指令是通过管道的形式实现的，所以我们要使用系统函数pipe。ls -l |wc -l的作用就是统计当前目录有多少文件。由于父子间通过管道实现，所以存在读写阻塞问题，不用担心僵尸进程的产生，所以可
阅读更多2024-09-07
MySQL表操作及约束
MySQL表操作及约束
阅读更多2024-09-07
1.2CubeMAX创建FREERTOS入门示例
内核参数设置，用户根据自己的实际应用来裁剪定制。：相关宏的定义，可以自建一些常量在工程中使用。User Constants（用户常量）：定时器和信号量的创建。：用于查看堆使用情况。：任务与队列
阅读更多2024-09-07
YOLOv9改进策略【注意力机制篇】| PSA极化自我关注：实现高质量像素回归
本文记录的是基于PSA注意力模块的YOLOv9目标检测方法研究。PSA模块。本文将其应用到YOLOv9的检测任务中，使模型能够更好地捕捉图像中的细节信息，以实现目标检测任务中准确识别和定位。
阅读更多2024-09-07
爆改YOLOv8|利用yolov10的SCDown改进yolov8-下采样
yolov8改进，yolov10, 下采样SCDown, 即插即用
阅读更多2024-09-07
PDF样本图册转换为一个链接，随时打开无需印刷
想象一下，您手中有一本厚重的样本图册，里面包含了丰富多样的内容，如产品介绍、项目方案、学术论文等。在过去，您需要逐一翻阅、筛选，甚至为了便于查看，不得不将其印刷出来。如今，借助先进的数字化技术，还能实
阅读更多2024-09-07