html5目录访问需用户主动授权，仅限所选目录及子项，不支持直接读取系统根路径；主流方式为webkitdirectory（兼容广，扁平化文件列表）和showdirectorypicker（结构清晰，支持递归与写入，https必需）。
HTML5 的目录访问能力不是“直接读取任意本地路径”，而是基于用户主动授权、沙箱隔离、逐步演进的受控机制。它不提供对 C:\ 或 /home/ 这类系统根路径的自由访问，只允许在用户明确选择后，读取所选目录及其子项——本质是“用户授予的一次性访问权限”，而非持久化文件系统挂载。
核心访问方式：两种主流 API 并存
目前浏览器实际支持的是两套互补但定位不同的机制：
-
webkitdirectory + FileList（兼容性广）：通过
<input type="file" webkitdirectory directory multiple>触发系统目录选择器。用户选定后，event.target.files返回一个FileList，其中每个File对象代表该目录下（含子目录内）的一个文件（注意：不区分层级，扁平化列出所有文件）。适用于 Chrome、Edge、Firefox（≥117）、Safari（≥16.4）。 -
showDirectoryPicker()（更现代、结构清晰）：调用
navigator.storage.getDirectory()或window.showDirectoryPicker()获取FileSystemDirectoryHandle。该对象可递归遍历子目录、区分文件与目录条目、保留路径层级关系，并支持后续写入（需用户再次授权）。仅限 HTTPS 环境，Chrome ≥86、Edge ≥86、Firefox ≥123 支持，Safari 尚未实现。
权限与沙箱：没有隐式访问，只有显式授权
所有目录访问都运行在严格沙箱中：
- 用户必须主动点击选择，网页无法静默扫描磁盘；
- 获得的句柄（Handle）或 FileList 仅在当前页面会话有效，刷新即失效；
- 无法获取绝对路径（如
C:\Users\Alice\Docs），只能通过handle.name或file.webkitRelativePath获得相对路径（例如"project/src/index.js"）； - 即使拿到句柄，读取子项仍需调用
handle.values()并 await 每个 entry，不能绕过 Promise 链直接同步遍历。
能做什么，不能做什么
✅ 可以做的事：
- 列出用户选定目录下的全部文件（包括嵌套子目录中的文件）；
- 按类型过滤（如只处理
.txt或.json）； - 逐个读取文件内容（用
FileReader或entry.getFile().arrayBuffer()）； - 构建前端资源管理器界面，展示树状结构（需递归解析
FileSystemDirectoryHandle）； - 配合 IndexedDB 或 Cache API，将目录内容缓存为离线资源。
❌ 明确不能做的事：
- 访问未被用户选中的任何路径（包括桌面、文档、下载等默认目录）；
- 枚举系统卷标、驱动器列表或用户主目录；
- 执行类似
fs.readdir('/etc')的底层系统调用； - 绕过用户确认自动恢复上次访问权限（除非使用
Permission API并获用户永久授权，但目前仅部分写入场景支持）； - 在 Safari 中使用
showDirectoryPicker()（该 API 在 Safari 中仍不可用）。
实际开发建议
面向多数场景，推荐分层适配：
- 优先尝试
showDirectoryPicker()，它结构清晰、语义明确、便于递归处理； - 降级 fallback 到
webkitdirectory输入框，用file.webkitRelativePath模拟层级（注意 Firefox 旧版可能为空字符串）； - 始终包裹 try/catch，捕获
"NotAllowedError"（用户取消）或"SecurityError"（HTTPS 缺失或权限拒绝）； - 避免假设所有浏览器返回相同结构——Chrome 的
webkitRelativePath是斜杠分隔，而某些旧 Edge 版本可能用反斜杠； - 若需持久化访问，引导用户保存句柄到 IndexedDB（Chrome 支持序列化
FileSystemHandle），并在下次加载时用self.getDirectory()恢复（需用户已授予权限）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
