HTML不支持多顶层文件夹上传，仅可递归上传单个文件夹内嵌套结构；webkitRelativePath提供相对路径用于服务端重建目录，需校验防路径遍历。
HTML 本身不支持“多层文件夹上传”——浏览器只允许一次选择一个文件夹（及其全部子文件），不能同时选中多个顶层文件夹再递归上传。所谓“多层”，实际是指单个被选文件夹内部的嵌套目录结构，这个结构能被保留，但前提是用对了标签和 API。
为什么 webkitdirectory 是唯一可行入口
只有 <input type="file" webkitdirectory directory multiple> 能触发原生文件夹选择对话框，并让浏览器递归读取子目录下的所有文件。其他方式（比如多次点击、拖拽多个文件夹）只会把每个文件夹当作一个普通文件或报错。
-
webkitdirectory是事实标准，Chrome、Edge、Safari 均支持；Firefox 不支持，需降级为手动多选 + 路径模拟 -
directory属性是 HTML5 正式属性，但目前仅 Safari 识别，Chrome/Edge 仍依赖webkitdirectory - 必须同时带
multiple，否则即使选中文件夹，e.target.files也只返回第一个文件（非文件夹） - 不要加
accept，它对文件夹无效，且可能禁用文件夹选择按钮
file.webkitRelativePath 是还原层级的关键
用户选中 /project/src/components/Button.vue 后，file.webkitRelativePath 的值就是 "src/components/Button.vue"，不含盘符或根路径。这是前端唯一能拿到的相对路径信息，也是后端重建目录结构的依据。
- 该字段只在
webkitdirectory触发时存在，普通多选文件中为空字符串 - 不能靠
file.name推断路径——同名文件在不同子目录下会冲突 - 服务端接收时，需按
webkitRelativePath中的/分割路径段，逐级创建目录并写入文件 - 注意：Windows 用户选的路径分隔符是
\，但webkitRelativePath统一返回/，无需转义
常见失败场景与绕过方法
当用户看到“只能上传单个文件”或“没反应”，大概率是标签写错了，或浏览器根本不支持。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
<input type="file" multiple>—— 这只是多选文件，不是文件夹 - 错误写法：
<input type="file" webkitdirectory>—— 缺少multiple，Chrome 下无法读取子目录文件 - Safari 16.4+ 才支持
directory，旧版 Safari 和所有 Firefox 版本需 fallback：提示用户压缩成 ZIP，或用 WebKit-only 提示覆盖 - 移动端（iOS/Android）完全不支持
webkitdirectory，必须用 ZIP 上传 + 后端解压，别试图 hack
真正难的不是前端标签，而是后端如何安全解析 webkitRelativePath 并防止路径遍历（如 ../../../etc/passwd）。这个校验逻辑一旦漏掉，webkitdirectory 就从便利功能变成高危入口。
