能否通过JS或HTML在单个浏览对话框中选择多个文件夹上传？

可以实现，你之前的代码问题在于缺少必要的兼容属性，导致主流浏览器无法正确识别多选文件夹的需求。下面是具体的解决方案：

1. 正确的HTML输入标签写法 #

要让浏览器支持单个对话框多选文件夹，需要同时添加标准属性和兼容属性，代码如下：

<input type="file" multiple directory webkitdirectory mozdirectory />

• directory：HTML标准属性，标记输入框用于选择文件夹
• multiple：允许同时选择多个文件夹
• webkitdirectory：适配Chrome、Edge、Opera等WebKit内核浏览器的必要属性
• mozdirectory：适配旧版Firefox（新版Firefox已支持标准directory属性）

2. 用JavaScript处理选中的文件 #

当用户选择文件夹后，输入框的files对象会包含选中文件夹下的所有文件（包括子文件夹内的文件），可以通过webkitRelativePath属性获取文件相对于选中文件夹的路径，示例代码：

const folderInput = document.querySelector('input[type="file"]');
folderInput.addEventListener('change', function(e) {
  const selectedFiles = e.target.files;
  // 遍历所有选中的文件
  for (const file of selectedFiles) {
    console.log(`文件相对路径：${file.webkitRelativePath}`);
    console.log(`文件对象：`, file);
    // 这里可以添加文件上传逻辑，比如用FormData发送到后端
  }
});

3. 浏览器兼容性说明 #

• Chrome/Edge/Opera：完全支持上述写法，多选文件夹功能正常
• Firefox：新版本无需mozdirectory，直接使用directory + multiple即可
• Safari：较新版本支持该功能
• IE：完全不支持，无需考虑

为什么你的原代码无法工作？ #

你只使用了multiple directory，缺少webkitdirectory属性——这是WebKit内核浏览器识别多选文件夹功能的关键，没有它的话，浏览器可能只能允许选择单个文件夹，甚至无法触发文件夹选择对话框。

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