HTML5拖放上传 [英] HTML5 drag-drop uploads
问题描述
有人知道如何使用HTML5通过桌面拖放文件实现上传吗？
我找到了以下参考资料：
Does anybody know how to use HTML5 to achieve uploads by drag-drop files form desktop? I have found the following references:
使用JavaScript拖放文件上传文章指出api已更改并链接到文件Api已更改（2010-09）
Drag and drop file uploading using JavaScript the article states that the api was changed and links to The File Api has changed (2010-09)
html5-drag-and-drop-multiple-file-upload（2017-11返回404） http://www.appelsiini.net/ （仍然有效）
但是是这样的吗？可以在所有平台上运行的lution： Firefox ， Chrome 和 Safari ？
but is there a solution that can run on all platforms: Firefox, Chrome and Safari?
非常感谢！
推荐答案
很抱歉，目前还没有可用的跨浏览器解决方案。
Sorry, at the moment there is no cross browser solution available.
当前浏览器实施问题
FF，Safari，Chrome，IE（跨浏览器问题）
没有递归文件夹上传 - 事实上，根本没有文件夹上传。虽然这不是一个显示停止，但如果浏览器也不会发送该文件夹中的所有文件，那么允许用户在文件上传输入框中选择文件夹似乎有点愚蠢。
FF, Safari, Chrome, IE (Cross-Browser Issues)
No recursive folder uploading -- as a matter of fact, no folder uploading at all. While this isn't a show stopper, it does seem kind of silly to allow a user to select a folder in the file upload input box if the browser won't send all the files inside that folder too.
此浏览器支持文件拖放，但实施可能是最糟糕的曾经构思过。为了上传用户删除的文件，我们必须将整个文件读入内存，然后通过Ajax将其发送到我们的服务器。这适用于大约10MB的滴。如果您使用400MB文件尝试相同的操作，请忘记它！
This browser supports file drag and drop, however the implementation is quite possibly the worst ever conceived. In order to upload a file that the user dropped, we have to read the entire file into memory and then send it over Ajax to our servers. This works fine for drops of around 10MB. If you try that same operation with a 400MB file, forget it!
Mozilla开发人员很快 - 他们意识到了问题他们以前的实现并创建了一种实现拖放上传的全新方式。 FormData对象是一个新的JavaScript对象，它允许Web开发人员将文件上载直接插入到Ajax请求中，而无需先将文件读入内存。我对此感到非常兴奋，并迅速下载了Firefox 4，这是第二个测试版。在玩了不到5分钟之后，我强烈反对你不要尝试它。由于缺乏对Firebug的支持，我的系统变得非常不稳定和缓慢，并且开发是一个主要的痛苦。
The Mozilla developers are quick ones -- they realized the problem with their previous implementation and have created a whole new way to implement drag and drop uploading. The FormData object is a new JavaScript object that allows a web developer to insert file uploads directly into an Ajax request without reading the files into memory first. I was really excited about this and promptly downloaded Firefox 4 which is in its 2nd beta. After playing around with it for less than 5 minutes, I strongly discourage you from trying it yet. My system became incredibly unstable and slow and development was a major pain due to lack of support for Firebug.
此浏览器是其实施中最好的！简单明了，我唯一的抱怨是你无法通过拖放上传文件夹及其内容。
This browser is by far the best in its implementation! Simple and straightforward, my only complaint here is that you can't upload a folder and its contents via drag and drop.
由于Safari就像Google Chrome一样建立在WebKit之上，我希望它也可以正常运行。哇，我错了！我在Safari 4和Safari 5中都尝试过这种方法。在将多个文件拖放到窗口中时，Safari会多次发送第一个文件，而不是发送所有文件。谈论一个主要的错误。为了使它更有趣，如果用户点击放置位置，他们可以使用标准文件选择对话框选择要上载的多个文件 - 并且按预期工作！我等不及Safari来解决这个问题。
Since Safari is built on top of WebKit just like Google Chrome, I expected it to work just as well. Wow, was I mistaken! I tried this in both Safari 4 and Safari 5. While dragging and dropping multiple files into the window works, Safari sends the first file multiple times, instead of sending all the files. Talk about a MAJOR bug. To make it even more interesting, if the user clicks on the drop location, they can select multiple files to upload using the standard file selection dialog -- and that works as expected! I can't wait for Safari to fix this issue.
说实话，我没有甚至不愿意尝试在Internet Explorer中拖放上传。由于缺乏良好的开发工具和不合规的JavaScript引擎，试图支持IE是一种痛苦。由于我无法让所有首选浏览器都能玩得很好，我无法想象Internet Explorer会非常接近。
To be honest, I haven't even bothered trying to do drag and drop uploads in Internet Explorer yet. Trying to support IE is a pain due to lack of good development tools and a non-conforming JavaScript engine. Since I haven't been able to get all the preferred browsers to play nice, I can't imagine Internet Explorer will be even close.
这篇关于HTML5拖放上传的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
