如何使用html5拖放功能与FileSystemAPI?

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 
};

上面的代码在点击提示用户选择目录的按钮时运行良好。我想用拖拽&Drop也意味着不点击&选择一个目录用户可以删除一个目录

跟随下面的链接，但它不适合我。

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

我将感谢任何帮助或输入在这方面。谢谢你！

Answer 1

<pHTML拖放界面使web应用程序能够接受拖放文件在网页上。在拖放操作期间，被拖放的文件和目录项是相关联的分别使用文件项和目录项。的DataTransferItem.getAsFileSystemHandle()方法返回一个带有FileSystemFileHandle对象的promise(如果被拖动的项目是一个文件)如果拖拽的项目是目录，则使用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);
      }
    }
  }
});