如何在 FileSystemAPI 中使用 html5 拖放功能？

Question

我正在使用 FileSystemAPI window.showDirectoryPicker() 打开一个目录，该目录正在返回该目录的句柄，通过使用它，我可以遍历所有存在的文件在那个目录中。

const dropArea = document.getElementById("drop_zone");
dropArea.onclick = async (evt) => {
  const dirHandle = await window.showDirectoryPicker();
  // Next lines of code using dirHandle 
};

当使用单击提示用户选择目录的按钮时，上面的代码工作正常。 我也想通过拖放实现相同的功能，这意味着用户可以拖放目录，而不是单击和选择目录。

按照下面的链接，但它对我不起作用。

https://developers.google.com/web/updates/2012/07/Drag-and-drop-a-folder-onto-Chrome-now-available#how_to_handle_dropped_folders

我将感谢您对此提供任何帮助或意见。谢谢！

Answer 1

HTML Drag and Drop interfaces 使 Web 应用程序接受 dragged and dropped files 在网页上。在拖放操作期间，拖动的文件和目录项是关联的 分别带有文件条目和目录条目。 DataTransferItem.getAsFileSystemHandle() 如果拖动的项目是文件，则方法返回带有 FileSystemFileHandle 对象的承诺，并且 如果拖动的项目是目录，则使用 FileSystemDirectoryHandle 对象承诺。上市 下面显示了这一点。请注意，拖放界面的 DataTransferItem.kind 对于文件 和 目录，将为 "file"，而文件系统访问 API 的 FileSystemHandle.kind会 "file" 用于文件，"directory" 用于目录。

elem.addEventListener('dragover', (e) => {
  // Prevent navigation.
  e.preventDefault();
});

elem.addEventListener('drop', async (e) => {
  // Prevent navigation.
  e.preventDefault();
  // Process all of the items.
  for (const item of e.dataTransfer.items) {
    // Careful: `kind` will be 'file' for both file
    // _and_ directory entries.
    if (item.kind === 'file') {
      const entry = await item.getAsFileSystemHandle();
      if (entry.kind === 'directory') {
        handleDirectoryEntry(entry);
      } else {
        handleFileEntry(entry);
      }
    }
  }
});