HTML5 拖放上传

有谁知道如何使用HTML5实现桌面拖放文件上传吗？ 我找到了以下参考资料：

1. 使用拖放选择文件 (2017-08) https://developer.mozilla.org/en/Using_files_from_web_applications#Selecting_files_using_drag_and_drop在developer.mozilla.org 上

2. 使用 JavaScript 拖放文件上传 http://www.thecssninja.com/javascript/drag-and-drop-upload文章指出 api 已更改并链接到文件 Api 已更改 (2010-09) https://www.thecssninja.com/javascript/fileapi

3. html5-拖放-多个文件上传（2017-11 返回 404） http://www.appelsiini.net/2009/10/html5-drag-and-drop-multiple-file-upload on http://www.appelsiini.net/ http://www.appelsiini.net/（还活着）

但有没有一个可以在所有平台上运行的解决方案：Firefox, Chrome and Safari?

非常感谢！

抱歉，目前没有可用的跨浏览器解决方案。

当前浏览器实现问题

FF、Safari、Chrome、IE（跨浏览器问题）

没有递归文件夹上传——事实上，根本没有文件夹上传。虽然这不是一个阻碍，但如果浏览器也不会发送该文件夹内的所有文件，那么允许用户在文件上传输入框中选择一个文件夹似乎有点愚蠢。

火狐浏览器 3.6.*

该浏览器支持文件拖放，但其实现很可能是有史以来最糟糕的。为了上传用户删除的文件，我们必须将整个文件读入内存，然后通过 Ajax 将其发送到我们的服务器。这对于 10MB 左右的数据滴来说效果很好。如果您对 400MB 的文件尝试相同的操作，那就算了！

火狐 4.*（测试版）

Mozilla 开发人员反应很快——他们意识到了之前实现的问题，并创建了一种全新的方法来实现拖放上传。 FormData 对象是一个新的 JavaScript 对象，它允许 Web 开发人员将文件上传直接插入到 Ajax 请求中，而无需先将文件读入内存。我对此感到非常兴奋，并立即下载了第二个测试版的 Firefox 4。在玩了不到 5 分钟后，我强烈建议您不要尝试。我的系统变得极其不稳定且缓慢，由于缺乏对 Firebug 的支持，开发变得非常痛苦。

铬（最新）

该浏览器是迄今为止实现最好的！简单明了，我唯一的抱怨是您无法通过拖放上传文件夹及其内容。

Safari 4.* 和 5.*

由于 Safari 与 Google Chrome 一样构建在 WebKit 之上，因此我希望它也能正常工作。哇，我是不是看错了！我在 Safari 4 和 Safari 5 中尝试过此操作。将多个文件拖放到窗口中时，Safari 会多次发送第一个文件，而不是发送所有文件。谈论一个主要错误。更有趣的是，如果用户单击放置位置，他们可以使用标准文件选择对话框选择要上传的多个文件 - 这将按预期工作！我等不及 Safari 解决这个问题了。

IE浏览器

老实说，我什至还没有尝试在 Internet Explorer 中进行拖放上传。由于缺乏良好的开发工具和不合格的 JavaScript 引擎，尝试支持 IE 是一件痛苦的事情。由于我无法让所有首选浏览器都能正常运行，因此我无法想象 Internet Explorer 会接近这一水平。

source http://cdblog.centraldesktop.com/2010/08/html5-file-drag-drop-for-online-collaboration.html