是否可通过HTML input的webkitdirectory属性实现同时选择多个目录？

原生的限制 #

目前所有主流桌面浏览器的原生文件选择组件，只要开启了文件夹选择模式（添加webkitdirectory/directory属性），即使同时设置了multiple属性，也仅支持单次选择1个文件夹。这是浏览器底层的实现限制，无法通过修改标签属性直接突破。

你现有代码中的multiple属性仅在纯文件选择模式下生效，开启文件夹选择后会自动失效。

可行实现方案 #

• 方案1：多次选择文件夹后合并文件列表
  不修改现有input结构，调整文件选择后的回调逻辑，每次选择文件夹后把新增的文件合并到全局存储的总文件列表中，不要直接覆盖旧数据即可，参考代码如下：

  // 全局存储所有选中的文件
  let totalFiles = [];
  
  const handleImageChange = (e) => {
    // 取出本次选中的文件夹内所有文件
    const currentFiles = Array.from(e.target.files);
    // 合并到总列表
    totalFiles = totalFiles.concat(currentFiles);
    // 重置input值，否则重复选择同一个文件夹不会触发change事件
    e.target.value = '';
    // 后续处理总文件列表的逻辑...
  }
  

• 方案2：通过拖拽API实现多文件夹同时选择
  新增拖拽上传区域，用户可以一次性拖拽多个文件夹到指定区域，通过HTML5拖拽API可以直接识别所有拖拽的文件夹及内部文件，参考代码片段：

  <!-- 拖拽区域 -->
  <div id="drop-area" style="width: 300px; height: 200px; border: 2px dashed #ccc;">
    拖拽多个文件夹到此处
  </div>
  

  const dropArea = document.getElementById('drop-area');
  
  // 阻止默认拖拽事件
  ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
    dropArea.addEventListener(eventName, e => e.preventDefault());
  });
  
  // 处理拖拽结束事件
  dropArea.addEventListener('drop', async (e) => {
    const items = Array.from(e.dataTransfer.items);
    // 遍历所有拖拽的条目，递归读取就能拿到多个文件夹下的全部文件
    for (const item of items) {
      const entry = item.webkitGetAsEntry();
      // 这里写递归逻辑读取entry下的所有文件即可，支持同时处理多个文件夹根条目
    }
  });
  

注意：webkitdirectory属于非标准属性，目前仅桌面端主流浏览器（Chrome、Edge、Firefox、Safari）支持，移动端浏览器大多不支持，若你的应用需要兼容移动端，需要额外做降级处理。

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