如何在我自己的代码中使用Google Chrome 11的上传文件夹功能？ [英] How do I use Google Chrome 11's Upload Folder feature in my own code?

问题描述

Google Chrome 11现在支持上传文件夹。目前这个功能只在谷歌文档中实现，我一直无法找到任何关于如何在我的代码中使用它的API文档。

从我所看到的，您单击Google文档中的上传文件夹链接，该链接显示浏览文件夹对话框（调用SHBrowseForFolder的外观），选择一个文件夹，然后将该文件夹的内容上传到Google文档。 / p>

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

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

解决方案

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

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

 < input type = fileid =file_inputwebkitdirectory =directory => 
  

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

拖放操作类似，当您收听可拖动元素上的ondrop事件，如果某个目录或文件选择被放到元素上，事件上的files属性将成为操作中包含的文件列表。

Google Chrome 11 now supports uploading folders. Currently this feature is only implemented in Google Docs, and I have been unable to find any API documentation on how to use this in my code.

From what I can see, you click the Upload folder link in Google Docs, which displays the "Browse For Folder" dialog (a call to SHBrowseForFolder by the looks of it), you select a folder, and then the contents of that folder is uploaded to Google Docs.

As this feature requires upgrading Google Chrome to the latest version, or for other browsers running a Java Applet, I assume I can use this feature in my own websites?

I would love to have this feature in a Content Management System I maintain!

解决方案

You should be able to see a demo here: http://html5-demos.appspot.com/static/html5storage/demos/upload_directory/index.html

Basically it works by setting up an attribute "webkitdirectory" on a file input element.

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

Then when the user has selected a folder, it itterates across the "e.target.files" object to get a list of files included in the selection (this enables you to have access to those files from the clientside).

Drag and drop is similar, when you listen to the "ondrop" event on a "draggable" element, if a a directory or selection of files is dropped on to the element, the "files" property on the event will be a list of files contained in the operation.

这篇关于如何在我自己的代码中使用Google Chrome 11的上传文件夹功能？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！