HTML5通过File API实现用户授权下的安全文件读取：①用<input type="file">或拖放获取File对象；②以FileReader异步读取文本、Data URL或ArrayBuffer；③导出则用Blob+a[download]；FileSystem Access API为实验性功能，仅Chromium支持且需用户显式授权。
HTML5 本身不提供直接访问操作系统文件系统的权限，所谓“文件系统集成”实际是通过受限、用户主动授权的接口实现有限交互。核心在于区分两个不同层级：一是安全沙箱内的客户端文件操作（File API），二是实验性或新标准中的本地文件系统写入能力（如 File System Access API）。真正的“本地应用与网页间交互”，目前仍需配合原生应用桥接，纯网页端无法绕过浏览器安全模型。
用 File API 实现用户可控的文件读取
这是最成熟、全平台支持的方式，依赖用户显式选择文件。
- 通过
<input type="file">获取 FileList，每个 File 对象含 name、size、type、lastModified 等只读属性 - 用 FileReader 异步读取内容：支持
readAsText()（文本）、readAsDataURL()（图片预览）、readAsArrayBuffer()（二进制处理） - 不能读取任意路径，只能处理用户点击选择或拖放进来的文件；多文件支持需加
multiple属性
用拖放（Drag & Drop）提升文件导入体验
让用户把文件直接拖进网页区域，比点击输入框更直观。
- 监听
dragenter、dragover并调用e.preventDefault()，否则浏览器会打开文件 - 在
drop事件中从e.dataTransfer.files取出 File 对象，后续处理方式与 input 一致 - 可结合文件类型校验（如
file.type.startsWith('image/')）提前过滤不支持的格式
用 Blob + a[download] 实现“另存为”功能
这是网页向用户导出内容的常用方式，无需服务器参与。
立即学习“前端免费学习笔记（深入）”；
- 将字符串、JSON 或 HTML 内容转为 Blob：
new Blob([content], {type: 'text/plain;charset=utf-8'}) - 创建临时 URL：
const url = URL.createObjectURL(blob) - 动态生成
<a>标签，设置href和download属性后触发点击 - 导出后记得调用
URL.revokeObjectURL(url)释放内存
注意 File System Access API 的现状与限制
这是 Chrome 86+ 支持的新标准，允许读写用户选定的文件或目录，但尚未成为通用方案。
- 需用户手动授予访问权限（弹出文件选择器并勾选“记住此选择”）
- 仅限 Chromium 系列浏览器，Firefox 和 Safari 尚未实现
- 不能访问任意路径，所有操作必须基于用户首次授权的句柄（handle）展开
- 若需跨平台稳定支持，仍建议以 File API 为基础，辅以桌面端应用（如 Electron）桥接
