HTML5 拖放上传

标签 html

有谁知道如何使用HTML5实现从桌面拖放文件上传? 我找到了以下引用资料:

  1. Selecting files using drag and drop (2017-08)在 developer.mozilla.org 上

  2. Drag and drop file uploading using JavaScript文章指出 api 已更改并链接到 The File Api has changed (2010-09)

  3. html5-drag-and-drop-multiple-file-upload (2017-11 returns 404)http://www.appelsiini.net/ (还活着)

但是是否有可以在所有平台上运行的解决方案:FirefoxChromeSafari

非常感谢!

最佳答案

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

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 会如此接近。

source

关于HTML5 拖放上传,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4263118/

相关文章:

html - 仅 CSS 下拉菜单不使用 UL/LI

html - 当我在手机或 Safari 上查看我的网页时,为什么我的 CSS 网格和 flexbox 图像显示空白区域?

html - 如何取消选择选择框中的项目?

html - 如何将图像放置在网页标题中?

javascript - 更改 Google map 中的颜色(自定义)

html - 如何修复 : CSS display:inline-block with text-align:center on parent is slightly off-center

html - 我认为链接 div id 在 html 位置不起作用

html - XSLT 值得吗?

html - h3字体颜色不变

javascript - 当我禁用提交按钮时(表单提交后)页面不加载