webkitdirectory 是 input type="file" 的布尔属性，需配合 type="file"、directory 和 multiple 使用，仅 chrome/edge/safari 16.4+ 支持，firefox 不支持；其 webkitrelativepath 提供相对路径，但不会自动提交至服务端，需手动通过 formdata.append("file", file, file.webkitrelativepath) 传递。
webkitdirectory 属性必须配合 type="file" 才生效
单独写 webkitdirectory 没用，它不是独立控件，只是 <input type="file"> 的一个布尔属性。浏览器只在用户主动选择文件夹时才触发目录上传，且仅支持 Chrome、Edge（基于 Chromium）、新版 Safari（16.4+），Firefox 完全不支持。
常见错误是写成：<input webkitdirectory> —— 缺少 type="file"，此时属性被忽略，输入框退化为普通文本框。
- 正确写法：
<input type="file" webkitdirectory directory multiple> -
directory和multiple是可选但强烈建议加上：前者让部分旧版 Chrome 明确识别目录意图，后者确保能读取子文件（否则可能只拿到空文件夹） - Safari 16.4+ 开始支持
webkitdirectory，但要求同时声明multiple，否则无效
JavaScript 读取文件夹内容要用 event.target.files 遍历
选中文件夹后，input.files 返回的是 FileList，里面包含所有嵌套文件（含路径信息），但不包含空子目录 —— 浏览器只把实际文件“扁平化”列出来，每个 File 对象的 webkitRelativePath 属性保存了相对于所选根目录的路径（如 "docs/report.pdf"）。
别试图用 FileReader 直接读 DirectoryEntry，那套旧 API（window.webkitRequestFileSystem）已废弃且不兼容现代安全策略。
- 必须遍历
event.target.files每一项，检查.webkitRelativePath判断层级关系 - 注意：同一文件夹下同名文件会被自动重命名（如
photo(1).jpg），webkitRelativePath也会反映该重命名结果 - 不能通过
File对象反推完整绝对路径（出于安全限制，返回的只是相对路径字符串）
服务端接收时注意 webkitRelativePath 不会自动传过去
HTML 表单提交或 FormData.append() 时，webkitRelativePath 是前端 JS 属性，**不会随文件二进制数据一起发到后端**。如果需要保留目录结构，必须手动提取并附加额外字段。
- 例如用
FormData上传时：formData.append("file", file, file.webkitRelativePath || file.name)—— 第三个参数设为相对路径，这样后端Content-Disposition的filename字段就能拿到带路径的名称 - Node.js / Python / PHP 等后端需解析 multipart 中的
filename字段（而非只看原始文件名），才能还原目录层级 - 若用 fetch +
FormData，确认服务端框架支持解析带斜杠的filename（某些老版本 Express 或 Nginx 默认会截断或报错）
移动端和兼容性陷阱特别多
iOS Safari 从 16.4 开始支持 webkitdirectory，但仅限于 PWA 添加到主屏幕后、且启用「桌面模式」的场景；微信内置浏览器、QQ 浏览器、安卓 WebView 大部分仍不支持，直接降级为单文件选择。
- 不要依赖
'webkitdirectory' in HTMLInputElement.prototype做检测 —— Safari 16.4+ 返回true，但实际行为受限，推荐运行时尝试创建input并检查input.webkitdirectory !== undefined - Android Chrome 支持，但部分定制 ROM（如华为 EMUI）会屏蔽该属性，表现为点击无反应
- 用户选中文件夹后，若其中包含大量小文件（>1000 个），Chrome 可能卡顿甚至崩溃 —— 建议前端加文件数量预检（
input.files.length）并提示
multiple 导致 Safari 不触发、没处理 webkitRelativePath 导致后端收不到目录信息、以及在非 Chromium 内核环境里没做 fallback 提示。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
