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 是核心读取器，所有读取都异步，靠事件驱动。别用同步方式——它不支持。
HISUI 前端框架开发指南（IRIS版）
下载
HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库，专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。 涵盖 40 个组件的官方文档参考，支持声明式与编程式两种初始化方式，提供 $cm/$m 数据访问方法。
-
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是字符串，可赋给<img src alt="如何操作文件_JavaScript中File API的基本用法是什么" >预览 - 用
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 没有“写入”能力，也没有“列出目录”或“删除文件”接口。所有“操作文件”的想象，必须拆解为“用户选中 → 浏览器读取 → 前端处理 → 发送到后端保存”这四步。跨域、大文件分片、进度反馈这些，都得自己补全逻辑。
