带有webkitdirectory属性的file输入控件能否选择多个目录？

嘿，这个问题我碰过好多次了，直接给你梳理清楚：

核心结论 #

你写的这段代码里，虽然同时加了directory（兼容webkit的前缀版）和multiple属性，但目前所有主流浏览器都不支持同时选择多个独立的目录。

实际行为细节 #

当你使用 <input type="file" id="files" name="files[]" webkitdirectory directory multiple> 时：

• 点击控件后，浏览器只会让你选择单个目录；
• 选中这个目录后，控件会自动递归获取该目录下的所有文件和子目录，相当于把整个目录树的内容都纳入上传列表；
• 这里的multiple属性完全不起作用——你没法按住Ctrl/Command键来多选不同的独立目录。

可行的替代方案 #

如果你的业务确实需要用户上传多个目录的内容，通常有两种靠谱的处理方式：

• 允许用户多次触发这个目录选择控件，每次选一个目录，然后在前端把多次选择的文件列表合并起来；
• 引导用户把需要上传的多个目录打包成ZIP文件，用普通的文件上传控件接收这个ZIP包，之后在后端解压处理里面的内容。

内容的提问来源于stack exchange，提问作者Oleksii Klipilin