文件操作：FileReader与Blob对象使用-js教程-PHP中文网

文件操作：FileReader与Blob对象使用

betcha

发布： 2025-11-18 21:42:23

原创

495人浏览过

FileReader是浏览器提供的用于异步读取文件内容的API，支持将File或Blob对象读取为文本、DataURL或ArrayBuffer格式；常用于图片预览、大文件分片上传等场景。通过readAsDataURL可实现上传前预览，结合Blob.slice可进行文件分片，利用URL.createObjectURL可生成临时预览链接，使用后需调用revokeObjectURL释放内存；注意读取为异步操作，不能直接访问文件路径，且单个FileReader实例只能同时处理一个任务。

文件操作：filereader与blob对象使用

在Web开发中，处理文件上传和本地文件读取是常见需求。通过 FileReader 和 Blob 对象，JavaScript 能够安全地读取用户选择的文件内容，并进行预览、分片、校验等操作。下面介绍它们的基本用法与典型场景。

FileReader 是什么？

FileReader 是浏览器提供的API，用于异步读取文件内容。它支持读取 File 或 Blob 类型的对象，并将结果以文本、DataURL、ArrayBuffer 等格式返回。

常用方法包括：

readAsText(file, encoding)：将文件读为文本字符串
readAsDataURL(file)：读为 base64 编码的 Data URL，适合图片预览
readAsArrayBuffer(file)：读为 ArrayBuffer，常用于二进制处理
readAsBinaryString(file)：读为二进制字符串（较少使用）

事件如 onload、onerror 可监听读取状态。

Blob 对象的作用

Blob（Binary Large Object）表示不可变的原始二进制数据。File 接口继承自 Blob，因此所有 File 实例都是 Blob。

你可以通过 Blob 构造函数创建部分文件或合成数据：

const blob = new Blob(["Hello, world"], { type: "text/plain" });

登录后复制

这在生成下载文件或处理大文件分片时非常有用。

56770 网络购物系统 2005

在商业版本基础上修改发布的，无功能限制，无使用时间限制，功能全面扩展，版面美观大方，俱备完整的购物网站功能、购物方便，操作简单，在线支付功能，采用网银支付完美在线支付接口，对一些文件重新编写，减少了图片的使用，网站整体配色更加明朗v2.01修正2005个人免费版出现的问题

查看详情

还可以利用 URL.createObjectURL() 创建一个指向 Blob 的临时URL，用于预览或赋值给 src 属性：

const url = URL.createObjectURL(blob);
document.getElementById("preview").src = url;

登录后复制

使用后建议调用 URL.revokeObjectURL(url) 释放内存。

实际应用场景示例

假设要实现一个图片上传前的预览功能：

document.getElementById("fileInput").addEventListener("change", function(e) {
  const file = e.target.files[0];
  if (!file || !file.type.startsWith("image/")) return;
<p>const reader = new FileReader();
reader.onload = function(evt) {
const img = document.getElementById("preview");
img.src = evt.target.result; // Data URL
};
reader.readAsDataURL(file);
});

登录后复制

对于大文件分片上传，可以结合 slice 方法使用 Blob：

const chunkSize = 1024 * 1024;
for (let start = 0; start < file.size; start += chunkSize) {
  const chunk = file.slice(start, start + chunkSize);
  uploadChunk(chunk); // 分段发送到服务器
}

登录后复制