如何结合HTML5拖放功能与FileSystemAPI实现目录拖拽获取？

你参考的教程对应的是旧版拖放目录API，和你现在用的File System Access API（也就是FileSystemAPI）不兼容，你需要使用拖放事件中配套的getAsFileSystemHandle()方法获取目录句柄，实现逻辑如下：

实现步骤 #

1. 阻止拖放区域的dragover和drop事件默认行为，避免浏览器默认打开拖拽的目录
2. 在drop事件中遍历dataTransfer.items，调用getAsFileSystemHandle()获取资源句柄
3. 判断句柄类型为目录后，就可以得到和window.showDirectoryPicker()返回值完全一致的目录句柄，复用你原有遍历逻辑即可

完整示例代码 #

const dropArea = document.getElementById("drop_zone");

// 原有点击选择逻辑保持不变
dropArea.onclick = async (evt) => {
  const dirHandle = await window.showDirectoryPicker();
  // 原有使用dirHandle的代码
  handleDirHandle(dirHandle);
};

// 新增阻止拖放默认行为
dropArea.addEventListener('dragover', (e) => {
  e.preventDefault();
  // 可选：添加拖拽悬停样式
  dropArea.classList.add('dragover');
});

// 可选：拖拽离开时移除样式
dropArea.addEventListener('dragleave', () => {
  dropArea.classList.remove('dragover');
});

// 处理拖拽释放事件
dropArea.addEventListener('drop', async (e) => {
  e.preventDefault();
  dropArea.classList.remove('dragover');

  // 遍历拖拽的条目
  for (const item of e.dataTransfer.items) {
    // 获取File System Access API格式的句柄
    const handle = await item.getAsFileSystemHandle();
    // 判断是否为目录
    if (handle.kind === 'directory') {
      // 直接复用原有逻辑，和点击选择拿到的dirHandle完全一致
      handleDirHandle(handle);
      // 如果只需要处理第一个拖拽的目录，加break即可
      break;
    }
  }
});

// 你原有处理目录句柄的逻辑，复用即可
async function handleDirHandle(dirHandle) {
  // 原有遍历目录等代码
  console.log('获取到目录句柄：', dirHandle);
}

注意事项 #

• 该API仅支持在安全上下文（HTTPS/localhost）环境下运行
• 目前仅Chromium内核浏览器（Chrome、Edge等）支持该API，Firefox、Safari暂未兼容File System Access API
• 如果你需要兼容不支持该API的浏览器，可以额外兼容旧版的webkitGetAsEntry()接口，和现有逻辑做降级处理

内容的提问来源于stack exchange，提问作者Pradeepta Kumar Khatoi