HTML5 的 multiple 属性仅支持多文件选择，不支持文件夹上传；需用 webkitdirectory 属性实现文件夹递归上传，并通过 webkitRelativePath 传递路径信息供后端还原目录结构。
HTML5 的 multiple 属性**不能用于上传整个文件夹**，它只支持一次性选择多个独立文件（如多个 .jpg、.pdf），但不支持递归选择子目录及其内容。
multiple 属性的真实能力
该属性仅扩展了 的选择范围，允许用户按住 Ctrl（Windows）或 Cmd（macOS）点击多个文件，或直接拖入多个文件。浏览器界面会显示“选择多个文件”，但所有被选中的仍必须是**扁平的文件列表**，不包含路径信息，更无法识别文件夹结构。
真正支持文件夹上传的方案：webkitdirectory
若需上传整个文件夹（含子目录和嵌套文件），应使用非标准但被主流浏览器（Chrome、Edge、Firefox、Safari 16.4+）支持的 webkitdirectory 属性：
- 添加
webkitdirectory directory到 file input 中，例如：
- 用户点击后，将弹出文件夹选择对话框（非文件选择对话框）；选中一个文件夹，浏览器会递归读取其下所有文件（不含文件夹本身）
- 通过
event.target.files获取的FileList中，每个File对象的webkitRelativePath属性可提供相对于所选文件夹的路径（如"docs/report.pdf"或"images/photo.jpg"），可用于服务端还原目录结构
后端处理需配合路径信息
仅靠前端无法自动创建服务端目录。必须将 webkitRelativePath 一并提交（如作为隐藏字段、或在 FormData 中附加）：
- 构建 FormData 时，对每个 File 添加对应路径：
formData.append('files', file, file.webkitRelativePath); - 后端接收时，根据该路径字段创建子目录并保存文件，避免全部挤在根目录
- 注意：Safari 旧版本或某些安全策略可能限制
webkitRelativePath，建议做空值 fallback 处理
兼容性与替代建议
如果目标环境不支持 webkitdirectory（如老旧 IE 或部分移动端 WebView），目前没有纯 HTML5 方案能可靠上传文件夹。可行替代方式包括：
- 引导用户压缩文件夹为 ZIP，再用普通
multiple上传单个压缩包，后端解压处理 - 使用 JavaScript 文件系统 API（如
showDirectoryPicker()）——但需 HTTPS + 用户主动授权，且兼容性仍在发展中（Chrome 86+，Edge 95+，Firefox 尚未支持） - 桌面端场景可考虑 Electron 或 Tauri 封装，调用原生文件系统能力
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
