webkitdirectory需与type="file"、directory配合使用，仅Chromium系及Safari 16.4+支持，Firefox用relativePath，须遍历files并用webkitRelativePath构造路径传给后端。
直接用 <input type="file"> 加 webkitdirectory 和 directory 属性就能触发文件夹选择，但浏览器支持不统一，不能只靠它就上线。
为什么 webkitdirectory 不能单独用
这个属性本质是 Chrome/Edge 的私有扩展，Firefox 只认 directory，而 Safari 和旧版 IE 完全不支持。用户点开后发现“只能选单个文件”，大概率是因为用了 Safari 或没加 fallback 逻辑。
-
webkitdirectory和directory必须同时写，缺一不可 - 即使两个都写了，
files列表里也不会出现“文件夹对象”，只有带webkitRelativePath的File实例 - macOS 系统下可能混入
__MACOSX隐藏目录，不过滤会导致后端解析失败或路径污染
webkitRelativePath 是关键，不是装饰
它才是还原原始目录结构的唯一依据。没有它，所有文件都会扁平化上传，后端根本分不清哪个 PDF 属于哪个子文件夹。
- 路径格式为
"project/drawings/part1.dwg"，斜杠分隔，不含盘符或根路径 - Firefox 返回的是
relativePath（无webkit前缀），但实际兼容性差，建议统一用webkitRelativePath || file.relativePath - 空字符串表示根目录下的文件，需特别处理，避免生成
"/filename.pdf"这类非法路径
表单提交前必须做三件事
光让浏览器选中文件夹远远不够，用户点击“上传”那一刻，你得确保数据可被后端正确识别和重建。
立即学习“前端免费学习笔记（深入）”；
- 遍历
e.target.files，用file.webkitRelativePath提取完整路径，丢弃以.或__MACOSX开头的项 - 每个
File实例必须通过FormData.append("file", file, file.webkitRelativePath)显式传路径 —— 第三个参数决定后端收到的filename字段值 -
<form></form>的enctype必须是multipart/form-data，且不能手动设置Content-Type请求头，否则 boundary 会错乱导致 400
最易忽略的一点：服务端必须按 filename 字段里的路径（比如 "docs/specs/v2.pdf"）来创建嵌套目录并落盘，而不是简单地把所有文件 dump 到一个文件夹里。前端传了结构，后端不还原，等于白干。
