HTML5如何用FileReader读取文件内容

HTML5的FileReader API为网页应用提供了强大而灵活的本地文件处理能力，无需服务器中转即可直接读取用户选择的文件内容或获取其元数据——无论是用readAsText解析文本、readAsDataURL快速预览图片音视频，还是用readAsArrayBuffer进行底层二进制操作，亦或是直接访问File对象的name、size、type等属性完成轻量校验，都能在纯前端环境下高效实现，极大提升了Web应用的交互性与实用性。

如果您希望在网页中直接读取用户选择的本地文件内容或获取其基本信息，HTML5 提供了 FileReader API 来实现这一功能。以下是具体操作步骤：

一、使用 input type="file" 获取文件对象

FileReader 的操作起点是用户通过文件输入控件选择的 File 对象。该对象不仅包含文件内容，还携带名称、大小、类型等元数据，是后续读取操作的基础。

1、在 HTML 中添加一个带有 multiple 属性（可选）和 accept 属性（可选）的文件输入元素：<input type="file" id="fileInput">。

2、通过 JavaScript 获取该元素并监听 change 事件：document.getElementById('fileInput').addEventListener('change', handleFileSelect);。

3、在事件处理函数中，从 event.target.files[0] 提取第一个 File 对象：const file = event.target.files[0];。

二、读取文件文本内容（readAsText）

该方法将文件以指定字符编码解析为字符串，适用于纯文本类文件（如 .txt、.json、.csv、.html 等），默认编码为 UTF-8。

1、创建 FileReader 实例：const reader = new FileReader();。

2、为 reader 设置 onload 事件处理程序，在其中访问 reader.result 获取解析后的文本字符串。

3、调用 reader.readAsText(file, 'UTF-8'); 启动异步读取。

三、读取文件为 Data URL（readAsDataURL）

该方法将文件内容编码为 base64 格式的 Data URL 字符串，常用于预览图片、音频或二进制资源，无需服务器中转即可在页面中直接渲染。

1、创建 FileReader 实例：const reader = new FileReader();。

2、监听 onload 事件，将 reader.result 赋值给 img 元素的 src 属性或 video/audio 的 src 属性。

3、调用 reader.readAsDataURL(file); 开始读取。

四、读取文件为 ArrayBuffer（readAsArrayBuffer）

该方法将文件原始字节流读取为 ArrayBuffer，适用于需要底层二进制处理的场景，例如解析图像头信息、加密解密、WebAssembly 数据加载等。

1、创建 FileReader 实例：const reader = new FileReader();。

2、监听 onload 事件，从 reader.result 获取 ArrayBuffer 对象。

3、调用 reader.readAsArrayBuffer(file); 启动读取。

五、仅获取文件属性而不读取内容

File 对象本身即继承自 Blob，具备 name、size、type、lastModified 等只读属性，无需 FileReader 即可直接访问，适合快速校验或显示文件信息。

1、从 input 元素获取 File 对象后，直接读取其属性：file.name 获取文件名。

2、使用 file.size 获取字节数，file.type 获取 MIME 类型（可能为空字符串）。

3、通过 file.lastModified 获取最后修改时间戳，可用 new Date(file.lastModified) 转为可读日期。

本篇关于《HTML5如何用FileReader读取文件内容》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！