浏览器支持拖放文件上传答案

【问题标题】：Browser support of drag and drop file uploads浏览器支持拖放文件上传
【发布时间】：2011-05-14 15:01:48
【问题描述】：

我似乎无法在任何地方在线找到它，只有演示或规范链接，或 Google Gears 实施。这一切都很好，但我很好奇它在主要浏览器和操作系统中的实际浏览器支持是什么。 Firefox、Chrome、Safari、Opera，还有 IE 有替代方案吗？ IE9 呢？

【问题讨论】：

标签： javascript ajax html file-upload drag-and-drop

【解决方案1】：

PIUpload 项目有一个兼容性表。它说

文件的拖放支持目前仅在 Firefox 3.5+ 中可用。 WebKit/Opera 尚不支持此功能。

【讨论】：

谢谢。我更新了我的帖子。你不知道我如何使用 VBDataObject 或 ActiveX 来让 IE 添加拖放支持吗？

【解决方案2】：

Firefox 3.5+ 有一个不错的拖放式 api：https://developer.mozilla.org/En/DragDrop/Drag_and_Drop

Chrome 您可以拖放到文件上传，因此，您可以进行拖放，但您必须通过 opacity:0 隐藏表单来伪造它，但通过包装 div 和宽度使其变大： 100% 和高度：100%：http://www.thecssninja.com/javascript/gmail-upload

Safari 与 Chrome 相同，只是一次只能执行一个文件，更多信息请参见文章末尾的上述链接（thecssninja 链接）

IE 似乎您可以使用 VBDataObject 或 ActiveX，但我仍然不太确定在哪里可以找到更多信息。我只能找到一些关于如何使用它们的 sn-ps 信息：http://www.codingforums.com/showthread.php?t=36896 -- 如果有人可以帮助我如何让 IE 支持它，请告诉我。

Opera 似乎一无所有。只是玩它，它就像 IE 一样，如果你拖动到文件上传它只会打开该文件。如果有人知道这件事，请告诉我。

【讨论】：

【解决方案3】：

Safari 5 确实支持将多个文件从桌面拖放到浏览器。我已经使用此功能很长时间了，如果您愿意，我很乐意分享我的代码。

【讨论】：

欢迎来到 StackOverflow。请分享代码示例，以使您的答案对其他人更有用。谢谢。

【解决方案4】：

要支持HTML5拖放文件上传，浏览器应同时支持拖放（DnD）API和文件API。

IE 支持来自 IE5 的 DnD，但即使在 IE9 中也不支持 File API。 Opera 从 11.1 开始支持 File API，但不支持 DnD。

因此您可以在 Firefox 3.6+、Safari 6.0+、Chrome 9.0+ 中使用拖放文件上传。

检查此兼容性表。

DnD http://caniuse.com/#search=drag

文件 API http://caniuse.com/#search=fileapi

【讨论】：

有什么方法可以对此进行功能测试，而无需浏览器嗅探？
我试了下没有检测到，比如说IE可以拖放。