如何在我自己的代码中使用 Google Chrome 11 的上传文件夹功能？

Posted 2023-03-05

【中文标题】如何在我自己的代码中使用 Google Chrome 11 的上传文件夹功能？

【英文标题】：How do I use Google Chrome 11's Upload Folder feature in my own code?

【发布时间】：2011-08-15 03:21:06

【问题描述】：

Google Chrome 11 现在支持上传文件夹。目前此功能仅在 Google Docs 中实现，我一直无法在我的代码中找到有关如何使用此功能的任何 API 文档。

据我所知，您单击 Google Docs 中的上传文件夹链接，该链接显示“浏览文件夹”对话框（从外观上看是对 SHBrowseForFolder 的调用），您选择一个文件夹，然后是该文件夹已上传到 Google Docs。

由于此功能需要将 Google Chrome 升级到最新版本，或者对于运行 Java Applet 的其他浏览器，我假设我可以在自己的网站中使用此功能？

我希望在我维护的内容管理系统中拥有此功能！

【问题讨论】：

这部分 html5 规范是只有 Chrome 实现的吗？还是只有 Chrome 的人物？

@woran 似乎仅限 Chrome。至少我在这里找不到任何相关的东西：w3.org/TR/FileAPI

特定 Chrome 版本 +1 :)

@woran Chrome 似乎只有：***.com/questions/3590058/…

它似乎只适用于 WebKit，但也适用于 Chrome 和 Yandex Browser Alpha。

【参考方案1】：

您应该可以在这里看到演示：http://html5-demos.appspot.com/static/html5storage/demos/upload_directory/index.html

基本上，它通过在文件输入元素上设置属性“webkitdirectory”来工作。

<input type="file" id="file_input" webkitdirectory="" directory="">

然后，当用户选择了一个文件夹时，它会遍历“e.target.files”对象以获取包含在选择中的文件列表（这使您可以从客户端访问这些文件）。

拖放类似，当您在“可拖动”元素上监听“ondrop”事件时，如果将目录或文件选择拖放到该元素上，则该事件的“文件”属性将是操作中包含的文件列表。

【讨论】：

保罗完全正确。附带说明一下，如果您想要 Firefox 中的功能，您还需要添加一个空的 mozdirectory 属性。

是否存在有关此功能的任何文档？博文提到了吗？在 MDN/caniuse.com 等上找不到任何内容。如果您 POST 提交会发生什么情况，是否所有文件都已上传且文件夹是否被忽略？

这太棒了！还有其他人有任何可以提供帮助的资源吗？

我不认为 Mike West 是对的。 Firefox 似乎不支持“mozdirectory”或“目录”。

目前在 IE 和 Firefox 中没有这样的东西。要检查，只需转到 Dropbox 并查看它是否在那里实现，如果没有，则可能意味着该功能不可用。