如何使用 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 
};

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

在下面link但它对我不起作用。

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 使网络应用程序能够接受 dragged and dropped files 在网页上。在拖放操作期间，拖动的文件和目录项是关联的分别带有文件条目和目录条目。 DataTransferItem.getAsFileSystemHandle() 方法 returns 如果拖动的项目是文件，则使用 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);
      }
    }
  }
});

如何使用 FileSystemAPI 的 html5 拖放功能？

How to use html5 drag-drop functionality with FileSystemAPI?

javascript

drag-and-drop

html5-filesystem

native-file-system-api-js