如何用JavaScript操作文件_File API怎么使用

紅蓮之龍 2026-01-13 00:00:00 次阅读

JavaScript无法直接读写本地文件系统，仅能通过File API操作用户主动选择的文件；需用input[type="file"]获取File对象，再通过FileReader异步读取内容，注意兼容性与大文件处理。

JavaScript 本身不能直接读写本地文件系统（出于安全限制），File API 提供的是对用户**主动选择的文件**进行读取和操作的能力，不是“任意文件读写”。它不支持写入磁盘、不支持遍历目录、也不能绕过用户授权访问文件。

怎么用 `input[type="file"]` 获取文件对象

这是所有操作的起点。用户必须通过交互（如点击上传按钮）触发文件选择，JS 才能拿到 File 对象。

File 是 Blob 的子类，所以可直接用 Blob 方法（如 slice()、arrayBuffer()）
event.target.files 返回的是 FileList，类似数组但不是 Array，需用 [0] 或展开操作获取单个 File
多选时记得加 multiple 属性，否则只返回第一个文件

用 `FileReader` 读取文件内容

FileReader 是异步读取的核心接口，支持转成文本、DataURL、ArrayBuffer。注意：它不能取消，也不支持进度回调（除非手动切片 + 循环读）。

readAsText(file, encoding)：适合纯文本（如 JSON、CSV）。编码默认 UTF-8，中文乱码常因未指定或后端编码不一致
readAsDataURL(file)：生成 base64 字符串，适合预览图片，但大文件会撑爆内存
readAsArrayBuffer(file)：适合二进制处理（如解析 Excel、音频分析），后续可用 Uint8Array 操作
必须监听 onload（成功）和 onerror（失败），onloadend 不区分成败

const reader = new FileReader();
reader.onload = () => {
  console.log(reader.result); // 根据 readAsXxx 方法不同，result 类型不同
};
reader.onerror = () => {
  console.error('读取失败:', reader.error);
};
reader.readAsText(file, 'UTF-8');

常见错误和兼容性注意点

看似简单，但实际开发中容易卡在几个地方：

直接对 File 调用 .text() 或 .arrayBuffer()？那是 Blob 的新方法（Chrome 76+、Firefox 69+），不是所有环境都支持；老环境必须用 FileReader
想读大文件（>500MB）？FileReader 会吃光内存，应改用 stream() + ReadableStream 分块读（但目前仅 Chromium 稳定支持）
上传前校验文件类型？别只信 file.type，它来自扩展名，可被伪造；真要校验得读文件头（如用 slice(0, 4) + arrayBuffer() 检查 magic bytes）
移动端 iOS Safari 对某些 MIME 类型（如 application/vnd.openxmlformats-officedocument.spreadsheetml.sheet）识别不准，file.type 可能为空字符串