如何操作文件_JavaScript中File API的基本用法是什么

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

File API 不能直接操作磁盘文件，它只提供对用户通过 或拖放选中的文件的只读访问能力。你无法用它读写任意路径（比如 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* 方法，不能混用判断逻辑。

立即学习“Java免费学习笔记（深入）”；

• 用 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 没有“写入”能力，也没有“列出目录”或“删除文件”接口。所有“操作文件”的想象，必须拆解为“用户选中 → 浏览器读取 → 前端处理 → 发送到后端保存”这四步。跨域、大文件分片、进度反馈这些，都得自己补全逻辑。