JavaScript使用FileReader读取文件方法

JavaScript中的FileReader API是前端处理用户上传文件的核心工具，它虽不限制文件类型，但能否成功读取并正确解析内容，完全取决于你选用的读取方法——readAsText适合文本类文件（需注意编码避免乱码），readAsDataURL专用于资源预览（如图片、音视频），readAsArrayBuffer则为二进制精细操作（如解析PDF、校验文件头、处理Excel）提供底层支持，而已废弃的readAsBinaryString应被替代；所有操作均为异步且受严格安全限制，仅允许读取用户主动选择或拖放的文件，无法访问本地路径或远程资源。掌握这四种方法的适用边界与配合技巧，才能真正释放FileReader在现代Web应用中的强大能力。

FileReader API 本身不限制文件类型，它能读取任何通过 或拖放等方式获取的 File 对象，包括文本、图片、音频、视频、PDF、压缩包、Office 文档等。真正决定“能否读取成功”和“是否能正确解析内容”的，是后续你用什么方法读取（readAsText、readAsDataURL 等）以及你如何解释读取结果。

支持的读取方式及对应适用场景

FileReader 提供 4 种核心读取方法，每种适用于不同需求：

• readAsText(file, encoding)：把文件当作文本读取，适合 .txt、.json、.csv、.js、.html 等纯文本或可编码为文本的文件。需注意指定正确编码（如 'UTF-8'），否则中文可能乱码。
• readAsDataURL(file)：生成 base64 编码的 Data URL，适合预览图片、音频、视频等二进制资源（例如赋值给 或 ）。
• readAsArrayBuffer(file)：读取为底层二进制缓冲区（ArrayBuffer），适合需要精细操作字节的场景，比如解析 PDF 结构、校验文件头、处理图像像素、解压 ZIP 等。
• readAsBinaryString(file)：已废弃，不推荐使用；应改用 readAsArrayBuffer + Uint8Array 处理。

实际能“读”的文件，取决于你怎么选方法

比如一个 .jpg 文件：

• 用 readAsText() 也能调用成功，但结果是乱码（因 JPEG 是二进制格式，不是有效 UTF-8 文本）；
• 用 readAsDataURL() 就能正常得到可直接显示的 base64 字符串；
• 用 readAsArrayBuffer() 可进一步用 new Uint8Array(buffer) 检查文件头（如 FF D8 FF），确认是否真为 JPEG。

同理，一个 .xlsx 文件无法被 readAsText() 正确解析成表格，但可用 readAsArrayBuffer() 配合 xlsx 库（如 SheetJS）来读取单元格数据。

浏览器限制与安全注意事项

FileReader 运行在沙箱中，只能读取用户主动选择或拖入的文件，不能直接访问本地路径（如 C:\xxx\file.txt）。它不支持跨域读取远程文件，也不提供写入、删除、重命名等操作。所有读取均为异步，需监听 onload、onerror 等事件获取结果。

简单示例：安全读取并预览任意图片

以下代码兼容 JPG/PNG/GIF/SVG 等常见图片格式：

const input = document.querySelector('input[type="file"]');
input.addEventListener('change', (e) => {
  const file = e.target.files[0];
  if (!file || !file.type.startsWith('image/')) return;

  const reader = new FileReader();
  reader.onload = () => {
    const img = document.createElement('img');
    img.src = reader.result; // result 是 data URL
    document.body.appendChild(img);
  };
  reader.readAsDataURL(file);
});

不复杂但容易忽略：判断 file.type 只是 MIME 类型提示，不可靠；关键还是根据业务目标选对 readAsXxx 方法，并对结果做合理处理。

好了，本文到此结束，带大家了解了《JavaScript使用FileReader读取文件方法》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！