离线读取本地文件必须由用户主动选择文件后用FileReader读取，禁止fetch('file://...')或自动触发文件对话框；仅支持<input type="file">或拖放获取File对象，再依类型调用readAsText/readAsDataURL/readAsArrayBuffer。
离线状态下读取本地文件，核心不是“绕过浏览器限制”，而是严格遵循用户授权路径：必须由用户主动选择文件，再用 FileReader 读取。浏览器禁止直接通过 fetch('file://...') 加载本地资源，这是安全机制，不是 bug。
必须通过用户交互触发文件选择
不能自动弹出文件对话框，也不能用 JS 调用 .click() 隐藏触发——现代浏览器会静默拦截。可靠方式只有两种：
- 放置可见的
<input type="file" id="fileInput">，让用户点击选择 - 实现拖放区域，监听
drop事件获取e.dataTransfer.files[0]
一旦用户完成选择，才能拿到 File 对象（它是 Blob 的子类），后续操作才被允许。
用 FileReader 正确读取内容
FileReader 是唯一合规的读取接口，且每次读新文件都需新建实例。关键细节：
立即学习“前端免费学习笔记（深入）”；
- 读文本（如 .json、.txt）用
readAsText(file, 'UTF-8')—— 编码必须显式指定，否则中文易乱码 - 读图片预览用
readAsDataURL(file)，但大文件慎用，Base64 字符串会占用大量内存 - 读二进制（如 .xlsx、.pdf）用
readAsArrayBuffer(file)，之后配合Uint8Array或TextDecoder解析 - 结果在
reader.result中，不是event.target.result
离线 ≠ 无网络时自动加载本地文件
“离线文件读取”常被误解为“网页一打开就能读某路径下的 data.json”。实际做不到。HTML5 没有提供访问任意本地路径的 API。所谓离线能力，是指：
- 用户在离线环境下，仍可通过
<input type="file">选取设备上已存在的文件 - 读取行为本身不依赖网络，
FileReader完全运行在客户端 - 若想“记住上次选的文件”，需结合
localStorage存路径名（但无法凭此自动读取，仍需用户再次选择）
别混淆 File API 和 FileSystem API
File API（FileReader + input[type=file]）是通用方案，所有现代浏览器支持。
FileSystem API（window.requestFileSystem）曾用于沙箱内建目录，但仅 Chrome 旧版本部分支持，目前已废弃，不应在新项目中使用。它不能读取用户设备任意位置的文件，也不解决“离线自动读”的问题。
