必须添加 webkitdirectory 属性才能选择整个文件夹；它非标准但已被主流浏览器支持，仅 multiple 无效，directory 属性冗余且被忽略。
必须加 webkitdirectory 属性，否则选不了文件夹
浏览器默认只允许用户选择单个或多个文件，webkitdirectory 是唯一能触发「选择整个文件夹」行为的原生属性。它不是标准 HTML 属性，但已被 Chrome、Edge、Safari（macOS/iOS 16.4+）和 Firefox（117+）支持。注意：仅加 multiple 没用，那只是多选文件；不加 webkitdirectory，用户根本看不到文件夹图标，也无法进入子目录。
directory 属性是冗余的，可删不可信
早期文档常写成 <input type="file" webkitdirectory directory multiple>，但 directory 实际上无任何作用——所有支持 webkitdirectory 的浏览器都忽略它；不支持的浏览器（如旧版 IE、Firefox webkitdirectory 和 multiple。
选中后靠 file.webkitRelativePath 还原目录结构
文件夹上传的关键价值在于保留层级，而这完全依赖 file.webkitRelativePath 字符串。例如用户选了 /project/src/index.js，该字段值就是 "project/src/index.js"；空字符串表示根目录文件。你必须用它构造服务端路径，不能只靠 file.name——后者只返回 "index.js"，丢失全部上下文。
- 若后端需还原完整结构，前端应把
webkitRelativePath作为额外字段随每个文件一起提交 - 注意 Safari 16.4 之前版本返回的是绝对路径（含盘符），需手动截断；16.4+ 已统一为相对路径
- Firefox 117+ 支持该字段，但旧版本返回
undefined，需降级处理为扁平上传
没有 fallback 到“模拟文件夹上传”的可靠方案
所谓“拖拽多层文件夹后递归扫描”纯属误解。File API 的 dataTransfer.items 在拖放场景下对子文件夹返回的是 kind: "file" 且 webkitRelativePath 为空，无法区分文件与文件夹，更无法遍历。唯一可行路径就是依赖 webkitdirectory 的原生支持。如果目标环境必须兼容老浏览器（如 IE11 或 Firefox
立即学习“前端免费学习笔记（深入）”；
