浏览器文件夹上传

Question

浏览器文件夹上传

htmlbrowseruploaddirectory

7

我希望能让用户只使用浏览器上传包含所有文件和文件夹的文件夹，并保留层次结构到我的Web应用程序中。

我已经搜索过，但没有找到如何做到这一点。每个人都说这是浏览器问题，我相信这一点，因为没有浏览器标准可以实现这一点。

我发现并尝试了许多JavaScript文件上传实现。当我将一个文件夹拖放到它们上面时，我可以获取所有文件的列表，但文件夹和层次结构全部丢失。如果我使用打开对话框来查找文件的那些实现，它们都不允许选择文件夹。

那么Dropbox是如何做到的呢？

我可以在Chrome或Safari（在我的Mac上）上拖动整个文件夹，它们都会上传文件夹和文件，并在Dropbox中保留层次结构。

难道没有人知道他们是如何做到的吗？这样我就可以在基于浏览器的自己的Web应用程序中实现同样的功能。

- user856232

也许你可以看一下 https://dev59.com/tGEh5IYBdhLWcg3ww11p#46562869 和 https://dev59.com/5m865IYBdhLWcg3wEKOZ#8218074 - caylee

那些看起来很有前途。我在Safari和Chrome中都尝试过，它确实显示了包含所有文件夹信息的数组。问题实际上是将其上传到服务器。我需要进行一些尝试。我的其中一个挑战是一些文件夹内使用相同的文件名，因此我必须能够将完整路径附加到被上传的文件流上。无论如何，谢谢。如果它有效，我会让你知道并且你可以将其转化为答案。 - user856232

这对我非常有效。请将您的评论转换为答案，以便我可以接受它作为答案。 - user856232

2个回答

1

要从浏览器上传文件夹，您需要设置一些属性，

Chrome、Firefox 不允许同时选择文件/文件夹，为此，您需要设置一些属性。

InputEl.setAttribute("directory",directory")
InputEl.setAttribute("webkitdirectory","webkitdirectory")

保留文件夹结构，需要使用webkitrelativepath。

 <input
      type="file"
      directory="directory"
      multiple
      webkitdirectory="webkitdirectory"
      id="files"
    />

document.getElementById("files").addEventListener("input", (e) => {
  console.log(document.getElementById("files").files);//fileList
});

将fileList（只读）转换为数组并循环遍历它们，存储webkitRelativePath值并将其更新到您的后端，这是保留已上传目录结构的一种方法。

注意：在上传文件时，webkitRelativePath将为""，仅当目录和webKitRelativePath属性存在时，才允许上传文件夹，并且对于这些文件，您将具有某些值的webkitRelativePath。

- Mohammed Shahed

感谢您提供这个新信息。 - user856232

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- caylee · Accepted Answer

为了支持目录上传，您需要在输入标签中添加一些参数：webkitdirectory 用于基于Webkit的浏览器（例如Chrome），mozdirectory 用于Mozilla浏览器（Firefox）。

HTML代码可能如下所示：

<input type="file" webkitdirectory mozdirectory … />

您可以查看https://dev59.com/tGEh5IYBdhLWcg3ww11p#46562869和https://dev59.com/5m865IYBdhLWcg3wEKOZ#8218074，这些是类似问题的答案。