JavaScriptFileAPI使用详解

文章小白一枚，正在不断学习积累知识，现将学习到的知识记录一下，也是将我的所得分享给大家！而今天这篇文章《JavaScript中File API怎么用》带大家来了解一下##content_title##，希望对大家的知识积累有所帮助，从而弥补自己的不足，助力实战开发！

File API仅支持用户主动选择的文件只读访问，无法操作磁盘任意路径；通过监听input的change事件获取FileList，用FileReader异步读取内容，支持text、dataURL、ArrayBuffer三种模式，无写入能力。

File API 不能直接操作磁盘文件，它只提供对用户通过 <input type="file"> 或拖放选中的文件的只读访问能力。你无法用它读写任意路径（比如 C:\data.txt），也不能绕过用户授权去读取本地文件系统。

如何获取用户选择的文件对象

最常见入口是监听 input 元素的 change 事件，从 event.target.files 中拿到 FileList：

• FileList 类似数组，但不是真正的 Array，需用 Array.from() 或展开运算符转成数组才能用 map/forEach
• 单文件上传时常用 files[0]；多文件则遍历 files
• 若用户取消选择，files.length 为 0，需做空检查

const input = document.querySelector('input[type="file"]');
input.addEventListener('change', (e) => {
  const file = e.target.files[0];
  if (!file) return;
  console.log(file.name, file.size, file.type); // name 是文件名（不含路径），size 单位字节，type 是 MIME 类型
});

如何读取文件内容：FileReader 的三种常用模式

FileReader 是核心读取器，所有读取都异步，靠事件驱动。别用同步方式——它不支持。

• readAsText(file, encoding)：适合文本文件，encoding 默认 "UTF-8"，中文乱码多半是这里没指定或错设为 "ASCII"
• readAsDataURL(file)：返回 data: URL，适合预览图片，但大文件会撑爆内存（base64 膨胀约 33%）
• readAsArrayBuffer(file)：读成二进制原始数据，适合处理音视频、PDF 或后续用 TextDecoder/Uint8Array 自定义解析

const reader = new FileReader();
reader.onload = () => {
  console.log(reader.result); // 文本内容 / data URL / ArrayBuffer
};
reader.onerror = () => {
  console.error('读取失败:', reader.error?.message);
};
reader.readAsText(file, 'UTF-8');

如何处理读取完成后的数据流

reader.onload 触发时，reader.result 类型取决于调用的 readAs* 方法，不能混用判断逻辑。

• 用 readAsText → result 是 string，可直接 .split('\n') 行处理
• 用 readAsDataURL → result 是字符串，可赋给 预览
• 用 readAsArrayBuffer → result 是 ArrayBuffer，需转 Uint8Array 才能逐字节访问，例如校验文件头（magic number）

// 检查是否为 PNG（前 8 字节固定）
const uint8 = new Uint8Array(reader.result);
if (uint8[0] === 0x89 && uint8[1] === 0x50 && uint8[2] === 0x4E && uint8[3] === 0x47) {
  console.log('是 PNG');
}

真正容易被忽略的是：File API 没有“写入”能力，也没有“列出目录”或“删除文件”接口。所有“操作文件”的想象，必须拆解为“用户选中 → 浏览器读取 → 前端处理 → 发送到后端保存”这四步。跨域、大文件分片、进度反馈这些，都得自己补全逻辑。

本篇关于《JavaScriptFileAPI使用详解》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！