浏览器文件夹上传答案

【问题标题】：Browser Folder Uploading浏览器文件夹上传
【发布时间】：2018-09-14 07:24:00
【问题描述】：

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

我已经搜索过，但没有找到如何执行此操作。每个人都说这是浏览器的问题，我相信这是因为没有浏览器标准来做到这一点。

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

那么 Dropbox 是如何做到的呢？

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

没有人知道他们是如何做到这一点的，以便我可以在我自己的基于浏览器的网络应用上做同样的事情吗？

【问题讨论】：

也许你可以看看stackoverflow.com/a/46562869和stackoverflow.com/a/8218074
那些看起来很有希望。我在 Safari 和 Chrome 中都试过了，它确实显示了包含所有文件夹信息的数组。问题实际上是将其上传到服务器。我将不得不玩弄它。我的挑战之一是某些文件夹内部使用的文件名相同，因此我必须能够将完整路径附加到上传的文件流。无论如何，谢谢你。如果可行，我会通知您，您可以将其转化为答案。
这对我来说非常有用。请将您的评论转换为答案，以便我接受它作为答案。

【解决方案1】：

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

HTML 代码可能如下所示：

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

【讨论】：

如何拖放到 div 中 - webkitdirectory 标签如何在那里工作？
@richardwhitney 您可能已经想通了，但仅供参考：developers.google.com/web/updates/2012/07/… (tldr; dragEvent.dataTransfer.items[n].webkitGetAsEntry() 将为您提供每个文件的 FileEntry 或 DirectoryEntry系统对象拖放到您的元素上）。