有谁知道如何使用HTML5实现从桌面拖放文件上传? 我找到了以下引用资料:
Selecting files using drag and drop (2017-08)在 developer.mozilla.org 上
Drag and drop file uploading using JavaScript文章指出 api 已更改并链接到 The File Api has changed (2010-09)
html5-drag-and-drop-multiple-file-upload (2017-11 returns 404)在 http://www.appelsiini.net/ (还活着)
但是是否有可以在所有平台上运行的解决方案:Firefox、Chrome 和 Safari?
非常感谢!
最佳答案
抱歉,目前没有可用的跨浏览器解决方案。
Current Browser Implementation Issues
FF、Safari、Chrome、IE(跨浏览器问题)
没有递归文件夹上传——事实上,根本没有文件夹上传。虽然这不是一个表演障碍,但如果浏览器也不会发送该文件夹中的所有文件,则允许用户在文件上传输入框中选择一个文件夹似乎有点愚蠢。
火狐 3.6.*
此浏览器支持文件拖放,但其实现很可能是有史以来最糟糕的。为了上传用户删除的文件,我们必须将整个文件读入内存,然后通过 Ajax 将其发送到我们的服务器。这适用于大约 10MB 的下降。如果您对 400MB 的文件尝试相同的操作,那就算了!
Firefox 4.*(测试版)
Mozilla 的开发人员是敏捷的——他们意识到了他们以前的实现的问题,并创造了一种全新的方式来实现拖放上传。 FormData 对象是一个新的 JavaScript 对象,它允许 Web 开发人员将文件上传直接插入到 Ajax 请求中,而无需先将文件读入内存。我对此感到非常兴奋,并立即下载了处于第二个测试版的 Firefox 4。玩了不到 5 分钟后,我强烈建议您不要尝试。我的系统变得异常不稳定和缓慢,由于缺乏对 Firebug 的支持,开发是一个主要的痛苦。
Chrome(最新)
这个浏览器是迄今为止最好的实现!简单明了,我在这里唯一的提示是您无法通过拖放上传文件夹及其内容。
Safari 4.* & 5.*
由于 Safari 与 Google Chrome 一样是基于 WebKit 构建的,因此我希望它也能正常工作。哇,我错了!我在 Safari 4 和 Safari 5 中都尝试过此操作。在将多个文件拖放到窗口中时,Safari 会多次发送第一个文件,而不是发送所有文件。谈论一个主要错误。更有趣的是,如果用户单击放置位置,他们可以使用标准文件选择对话框选择多个文件进行上传——这会按预期工作!我等不及 Safari 解决这个问题了。
互联网浏览器
老实说,我什至还没有费心尝试在 Internet Explorer 中进行拖放上传。由于缺乏良好的开发工具和不符合标准的 JavaScript 引擎,尝试支持 IE 是一件痛苦的事情。由于我无法让所有首选浏览器都能正常运行,因此我无法想象 Internet Explorer 会如此接近。
关于HTML5 拖放上传,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4263118/