html原生input type="file"不支持选择文件夹，仅能通过multiple选多个文件；webkitdirectory属性（chrome/edge）可选单个文件夹及其子文件，但非标准且不支持多文件夹；真正多文件夹操作需用file system access api或桌面应用。
file input 根本不支持选择文件夹
HTML 原生 <input type="file"> 无法选择文件夹，这是浏览器安全策略决定的——它只暴露文件内容，不暴露目录结构。所谓“选择多个文件夹”，在标准 HTML 中不存在对应能力。
能选多个文件，但不能选文件夹
你可以用 multiple 属性选多个文件，但仍是文件粒度：
<input type="file" multiple>
用户可按住 Ctrl（或 Cmd）点选多个文件，或拖入多个文件，但无法点击进入并选中整个文件夹。即使用户在文件对话框里切换到“文件夹视图”，提交的仍是其中被显式勾选的文件，不是文件夹路径。
想读文件夹？只能靠 WebKitDirectory（仅限 Chrome/Edge）
Chrome 和 Edge 支持一个非标准属性 webkitdirectory，允许用户选择一个文件夹，并递归读取其下所有文件（注意：不是“多个文件夹”，而是“一个文件夹及其子文件”）：
<input type="file" webkitdirectory directory multiple>
关键点：
-
webkitdirectory是私有前缀属性，Firefox 和 Safari 不支持 - 必须同时带
directory和multiple才能触发文件夹选择模式 - 返回的
FileList包含所有子文件，每个File对象的webkitRelativePath字段会保留相对路径（如"docs/report.pdf"），但没有原生 API 获取父文件夹名或遍历目录结构 - 无法通过此方式一次选中多个独立文件夹（比如桌面 + D:\data）
真正需要多文件夹操作？得换思路
如果业务确实依赖多文件夹批量上传或扫描（例如同步工具、素材管理器），原生 <input> 无解，必须转向：
- Electron 或 Tauri 桌面应用：用 Node.js 或系统 API 直接访问文件系统
- Web 应用 + 后端配合：引导用户逐个拖入文件夹（靠
webkitdirectory模拟），或提供 ZIP 上传入口（让用户先打包） - 使用 File System Access API（现代 Chrome/Edge/Firefox 支持）：调用
window.showDirectoryPicker()可真正获取FileSystemDirectoryHandle，支持遍历、读写，但需 HTTPS、用户主动授权，且不能一次性选多个根目录——每次调用只返回一个句柄
别指望 <input type="file"> 解决文件夹问题。它的设计初衷就是单次、受控、文件级的数据导入，越界需求必须跳出表单思维。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
