HTML5通过File API和FileSystem API实现本地文件操作：1. File API利用input或拖放获取文件，通过FileReader读取内容，支持文本、数据URL等格式；2. 拖拽功能提升用户体验，允许将文件直接拖入页面读取；3. FileSystem API（实验性）可在沙盒中创建、读写文件，仅部分浏览器支持；注意事项包括安全限制、API兼容性及推荐使用Native File System API替代方案。
HTML5 提供了 File API 和 FileSystem API，让网页可以读取用户本地文件并与本地文件系统进行有限交互。下面分别介绍如何使用这些 API 实现本地文件读取和文件系统操作。
1. 使用 File API 读取本地文件
File API 允许通过 input 元素或拖放操作获取用户选择的文件，并使用 FileReader 将其内容读取到内存中。
示例：通过 input 上传并读取文本文件
JavaScript 代码：
立即学习“前端免费学习笔记（深入）”；
说明：
-
FileReader 支持多种读取方式：
readAsText()、readAsDataURL()（用于图片预览）、readAsArrayBuffer()等。 - 只能读取用户主动选择的文件，不能随意访问本地路径。
2. 拖拽文件读取（增强用户体验）
支持将文件拖入页面区域进行读取。
拖拽文件到这里
JavaScript 代码：
立即学习“前端免费学习笔记（深入）”；
3. 使用 FileSystem API（实验性，仅部分浏览器支持）
FileSystem API 可实现更深入的文件系统交互，如创建、写入、读取沙盒目录中的文件。注意：该 API 目前仅在基于 Chromium 的浏览器中部分支持（需启用 flag），且为实验性功能。
示例：请求文件系统并写入/读取文件
说明：
- TEMPORARY 或 PERSISTENT 存储类型。
- 文件存储在浏览器沙盒中，非真实本地路径。
- Chrome 中需启用
chrome://flags/#enable-experimental-web-platform-features才能使用。
注意事项
- 出于安全考虑，网页无法直接访问用户任意本地路径。
- File API 已广泛支持，适合读取用户授权的文件。
- FileSystem API 仍处于实验阶段，不适合生产环境。
- 现代替代方案包括：使用 showOpenFilePicker、showSaveFilePicker（基于 Native File System API）——需 HTTPS 和现代浏览器支持。
