File API 不能直接读写本地文件系统
JavaScript 在浏览器中无法像 Node.js 那样用 fs.readFile 直接访问任意路径的文件——这是安全限制，不是 API 缺失。File API 的核心作用是**响应用户主动选择的文件**，比如通过 或拖拽，它提供的是只读、临时、内存内的文件引用。
如何正确获取并读取用户选中的文件
关键步骤是监听用户输入，拿到 File 对象（注意：它是 Blob 的子类），再用 FileReader 解析内容。常见错误是试图在未触发用户交互时预加载或硬编码路径。
-
input.files是一个FileList，哪怕只选一个文件也要用input.files[0] - 必须用
FileReader的异步方法（readAsText/readAsArrayBuffer），不能同步读取 - 读取完成要监听
load事件，而不是直接取reader.result - 大文件慎用
readAsText，容易卡顿；优先考虑readAsArrayBuffer+TextDecoder
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', (e) => {
const file = e.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = () => {
console.log('文件内容：', reader.result);
};
reader.onerror = () => {
console.error('读取失败：', reader.error);
};
reader.readAsText(file, 'UTF-8');
});
File API 常见误用和兼容性注意点
很多人以为 File 对象能当路径用，或者想绕过用户选择直接“打开 C:\xxx.txt”——这在标准浏览器中完全不可行。另外，部分老版本 Safari 对 FileReader 的 progress 事件支持不完整，上传大文件时进度反馈可能为空。
-
file.path在 Chrome/Firefox 中始终为""（空字符串），仅某些 Electron 或 WebView 环境下有值，不可依赖 -
URL.createObjectURL(file)可生成临时 URL 用于，但记得用完调URL.revokeObjectURL()防内存泄漏 - 需要写文件？浏览器原生不支持。只能靠后端接口上传，或使用
showSaveFilePicker()（需 HTTPS + Chrome/Edge 97+，且用户必须主动触发）
替代方案：什么时候该换思路
如果你的需求本质是“保存配置”“缓存数据”或“导出日志”，别硬刚 File API。更实际的做法是：
立即学习“Java免费学习笔记（深入）”；
- 用
localStorage或IndexedDB存结构化数据 - 用
download属性 +Blob触发下载： - 需要真正文件系统访问？转向
FileSystem Access API（目前仅 Chromium 系主流支持），但它仍要求用户点击授权，不是无感操作
File API 不是文件系统 API，它只是用户与文件之间的一道受控桥梁。所有绕过用户显式授权的操作，要么被浏览器拦截，要么只在特定嵌入环境（如 Electron、Tauri）里可行。
