当前唯一稳定用于生产环境的目录选择方式是，它无需https、不触发权限请求、直接返回filelist；而showdirectorypicker受限于安全上下文、浏览器支持差且无法获取真实路径。
现在能稳定用于生产环境的目录选择方式，只有 <input type="file"> 加 webkitdirectory 和 directory 属性这一种。别指望 showDirectoryPicker() 在普通网页里直接跑通——它不是“不能用”，而是“几乎总卡在第一步”。
为什么 showDirectoryPicker() 基本没法在常规页面调用
这个 API 表面干净，实际落地全是条件锁：
-
NotAllowedError是最常见报错，原因包括：没在用户手势（如click）回调里调用、当前页面不是 HTTPS 或localhost、之前没调过navigator.permissions.request({ name: 'filesystem-access' }) - 即使拿到
FileSystemDirectoryHandle，你也拿不到真实路径字符串——handle.fullPath是沙盒内虚拟路径（如"/my-project/src/index.js"），不是/Users/xxx/project这种系统路径 - Firefox 和 Safari 完全不支持；Chrome 86+ 支持但要求严格，且返回的是异步 handle，不能像
input.files那样直接遍历File对象
<input type="file"> 加 webkitdirectory 怎么写才不出错
这是目前唯一跨浏览器（Chrome/Safari）、无需 HTTPS、不弹权限框、返回即用的方案：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 必须同时写
webkitdirectory和directory：前者是实际生效属性，后者是 HTML5 草案属性，加了更稳妥 - 一定要加
multiple，否则event.target.files.length === 1，且那个File对象是空的（只含目录名，无子文件） - 不要设
accept——对目录选择无效，某些版本 Safari 会因此渲染异常 - 用隐藏 + 按钮触发比 JS 动态创建更稳：
<input type="file" id="dir-input" webkitdirectory directory multiple style="display:none">，再用按钮click()触发
拿到 event.target.files 后能干啥、不能干啥
files 是标准 FileList，每个项是继承自 Blob 的 File 对象：
- ✅ 可安全读取：
file.name（含扩展名）、file.size、file.lastModified、file.type（MIME 类型，无后缀时可能为空） - ❌ 不能获取父目录路径、不能写入、不能判断是否为子目录（所有项都扁平化为
File，目录结构信息已丢失） - ⚠️ 注意：
file.webkitRelativePath在 Chrome 中存在，但值不可靠（有时为空，有时是相对路径字符串），Safari 不支持，不能作为结构解析依据
真正难的不是“怎么选目录”，而是选完之后怎么还原目录树——input 方案只给扁平文件列表，showDirectoryPicker 能递归遍历但兼容性太差。如果项目真需要完整路径结构，得自己用 file.name 字符串做分组或依赖后端配合，别指望前端单靠一个 API 就解决所有事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
