当前唯一可靠可用的目录选择方案是，因其兼容性好、无需https、不依赖权限请求、直接返回filelist，而showdirectorypicker受限于安全上下文、浏览器支持差、无法获取真实路径且调用条件苛刻。

showDirectoryPicker 是目前最接近“原生目录选择”的标准 API，但它**不能直接用于传统网页环境**——它只在 Secure Context（HTTPS 或 localhost）下可用，且要求页面已获得文件系统权限（通过 navigator.permissions.query），还依赖于 FileSystemDirectoryHandle。 你真正能立刻用、兼容性可控、无需服务端配合的方案，还是 <input type="file" webkitdirectory directory multiple>。别被新 API 名字带偏了。

为什么 showDirectoryPicker 现在基本用不了

这个 API 表面简洁，实际落地卡点密集：

• showDirectoryPicker 会抛出 NotAllowedError：用户没主动触发（比如不在 click 回调里调）、页面没 HTTPS、或之前没调过 requestPermission
• 即使成功拿到 FileSystemDirectoryHandle，你也只能用它读取文件内容（getFileHandle / getEntries），**拿不到真实路径字符串**——handle.name 是目录名，handle.fullPath 是沙盒内虚拟路径，不是 /Users/xxx/project 这种
• Chrome 86+ 支持，但 Safari 和 Firefox 完全不支持 showDirectoryPicker；而 webkitdirectory 在 Chrome/Safari 里稳定运行多年
• 它返回的是异步 handle，没法像 input.files 那样直接遍历 File 对象获取 name、size、lastModified

<input type="file"> 加 webkitdirectory 怎么写才可靠

这是当前唯一能跨项目复用、调试直观、不报错的目录选择方式：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 必须同时写 webkitdirectory 和 directory：前者是 Chrome/Safari 实际生效的属性，后者是 HTML5 标准草案属性（虽未正式采纳，但加了更稳妥）
• 加 multiple 才能选中子目录下的全部文件（否则只返回目录本身，files.length === 1 且是个空 File）
• 不要设 accept —— 它对目录选择无效，反而可能干扰渲染
• 隐藏 input 元素比用 JS 动态创建更稳：<input type="file" id="dir-input" webkitdirectory directory multiple style="display:none">，然后用按钮 click() 触发，避免移动端兼容问题

拿到 event.target.files 后能干什么、不能干什么

files 是 FileList，每个项是 File 对象（继承自 Blob）：

• ✅ 可安全读取：file.name（含扩展名）、file.size、file.lastModified、file.type（MIME 类型，对无后缀文件可能为空）
• ✅ 可用 file.text()、file.arrayBuffer() 读内容（需 await）
• ❌ 拿不到真实磁盘路径：file.path 是 Chromium 私有属性，仅限桌面 Chrome/Safari 且开启 flag（chrome://flags/#unsafely-treat-insecure-origin-as-secure）才可能有值，生产环境必须视为不存在
• ❌ 无法区分文件和子目录：所有条目都表现为 File，没有 isDirectory 字段；若需递归遍历子目录，必须靠后端或 Electron 等运行时支持

容易被忽略的兼容性细节

看似简单，但几个边界情况常导致白屏或静默失败：

• Firefox 完全不支持 webkitdirectory，也不支持 showDirectoryPicker；如果必须支持 Firefox，只能退回到单文件选择 + 用户手动 zip 目录上传
• 移动端（iOS Safari / Android Chrome）对 webkitdirectory 支持极差：iOS 完全无视该属性，Android 部分版本仅允许选择“文档”类目录，且无法进入深层子目录
• input 元素必须插入 DOM 才能触发选择框；用 document.createElement('input') 创建后没 append 就 click()，在某些 Chrome 版本会静默失败
• 用户取消选择时，input.files.length 为 0，但 input.value 不一定清空（旧值残留），建议每次 change 回调开头就重置 UI

webkitdirectory 不是临时妥协，而是当前 Web 平台下唯一可交付的目录选择路径。别等 showDirectoryPicker 成熟——它解决的是「访问本地文件系统」的问题，而你通常只需要「让用户挑一个文件夹里的文件列表」，前者太重，后者一行 input 就够。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！