webkitdirectory 不生效是因为仅 chromium 系列支持，必须配合 type="file" 使用，且需通过 http(s) 访问；正确写法为 ，不可设值或与 multiple 混用，firefox/safari 不支持，linux 某些环境亦受限。
为什么 webkitdirectory 不生效
直接加 webkitdirectory 属性但没反应？大概率是浏览器限制或写法不对。这个属性只在 Chromium 系列（Chrome、Edge、新版 Opera）中支持，Firefox 和 Safari 完全不识别；而且必须配合 type="file" 使用，单独加没用。
-
webkitdirectory是非标准属性，不能和multiple混用（虽然部分旧版本 Chrome 允许，但行为不可靠） - 必须用
<input type="file" webkitdirectory>，不能写成webkitdirectory="true"或其他值 - 某些安全上下文（比如本地双击打开的
file://页面）会禁用该功能，需通过http://或https://服务访问
正确写法与基础 HTML 结构
只需一行声明，但要注意位置和配套属性：
<input type="file" webkitdirectory directory multiple>
其中 directory 是 HTML5 标准属性（已被废弃但仍有兼容作用），multiple 在现代 Chrome 中实际被忽略，但加上更稳妥。注意：这里 multiple 不影响文件夹选择，仅对多选文件夹时起作用（极少场景）。
- 不要加
accept——它对文件夹无效，反而可能干扰渲染 - 不要绑定
change事件后直接读event.target.files的 length 判断“是否选中”，因为文件夹里可能有大量子项，files是一个FileList，包含所有递归子文件（含路径信息） - 选中文件夹后，
files[0].webkitRelativePath会返回类似my-folder/sub/file.txt的相对路径，这是关键线索
读取文件夹内容的实际 JS 处理逻辑
用户点了文件夹，但 input.files 里不是“一个文件夹对象”，而是一堆带层级路径的 File 对象。你要自己按 webkitRelativePath 做分组和树形还原。
- 遍历
event.target.files，提取每个file.webkitRelativePath.split("/")[0]作为根目录名 - 用
Array.from(files).reduce(...)构建嵌套结构，注意空路径（即顶层文件）要单独处理 - 别试图用
FileReader.readAsDataURL()一次性读所有文件——大文件夹会卡死，应按需读或分批处理 - 如果需要上传，建议打包成
FormData并带上路径字段：formData.append("file", file, file.webkitRelativePath)
容易被忽略的兼容性细节
看似简单，但真实项目里最容易栽在这几点：
- Electron 应用默认禁用
webkitdirectory，需在webPreferences中显式开启nodeIntegration: true（不推荐）或改用dialog.showOpenDialog({ properties: ['openDirectory'] }) - 移动端 Chrome（Android）完全不支持
webkitdirectory，用户只能单选文件，无替代方案 - 即使浏览器支持，也受操作系统限制：Windows 和 macOS 都支持，但 Linux 某些桌面环境（如 Wayland + GNOME）可能无法触发文件夹选择对话框
-
webkitRelativePath在 Firefox 中为""，Safari 返回undefined，做 fallback 时别依赖它判断是否为文件夹
真要跨平台稳定支持文件夹上传，得放弃纯前端方案，改用桌面客户端或服务端提供 WebDAV/拖拽+API 分片上传等替代路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
