0

我正在使用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

对于这方面的任何帮助或意见，我将不胜感激。谢谢！

4

1 回答 1

1

HTML 拖放界面 使 Web 应用程序能够接受 在 网页上拖放的文件。在拖放操作期间，被拖动的文件和目录项分别与文件条目和目录条目相关联。如果拖动的项目是文件，该DataTransferItem.getAsFileSystemHandle() 方法返回带有对象的承诺，如果拖动的项目是目录，则返回带有对象的承诺。下面的清单显示了这一点。请注意，拖放接口 将用于文件和目录，而文件系统访问 API 将用于文件和目录。FileSystemFileHandleFileSystemDirectoryHandleDataTransferItem.kind"file"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);
      }
    }
  }
});
于 2021-08-18T09:26:13.610 回答