Question

我正在实施jQuery File Upload并尝试找出检测客户端是否可以支持拖放的最佳方法。因此我可以渲染类似'Drag＆amp; amp;将文件放在这里上传'只有他们真的可以这样做。

在插件代码中，我可以看到一个函数isXHRUploadCapable，它几乎与drag＆amp; amp;放弃支持，但我认为这比任何事都更巧合。（它使用iFrames发布上传而不是IE和Opera的XMLHTTPRequest上传。如果支持拖放，看不到任何能让我知道的东西，所以我怀疑它只是一个事件发生或者不是。

文档说“Windows版本的Safari不支持Drag＆amp; Drop.MSIE和Opera不支持Drag＆amp; Drop，多文件选择或上传进度指示。”因此，也许只是Windows版本的Safari支持XMLHTTPRequest上传，但不支持拖放。降？

无论如何 - 我试图找出检测浏览器是否支持拖放的最佳方法。使用此插件删除上传，我不知道如何做到这一点。拖放功能是否可以轻松测试？我该怎么办？这个功能是依赖于浏览器，还是Jquery Upload是否特别支持该浏览器？

Answer 1

Modernizr是事实上的浏览器支持检测插件，支持拖放检测。

在Modernizr 1.5中，我们测试以下拖动事件：


拖

的dragstart

的dragenter

的dragover

dragleave

dragend

降

Source

Answer 2

我遇到了同样的问题并尝试检查window.FileReader＆amp;＆amp; Modernizr.draganddrop就像你说的那样。这是我的测试输出：

IE window.FileReader==undefined && Modernizr.draganddrop==true
OPERA window.FileReader==window.FileReader && Modernizr.draganddrop==false
CHROME window.FileReader==window.FileReader && Modernizr.draganddrop==true
FIREFOX window.FileReader==window.FileReader && Modernizr.draganddrop==true
SAFARI window.FileReader==undefined && Modernizr.draganddrop==true

因此，您的情况取消了D＆amp; D不支持的浏览器IE和OPERA。但它还会降低支持拖放的SAFARI。

在这种情况下，我们也可以添加jQuery.browser检查以删除IE和OPERA。

Answer 3

Modernizr的当前版本2.6.2包含对FileReader的测试。

Modernizr.filereader && Modernizr.draganddrop

filereader测试位于 非核心检测 部分下。 draganddrop位于 HTML5 部分。访问Modernizr download page。

Answer 4

它有点棘手。 iOS7报告它支持FileReader和draganddrop图片上传。由于我正在寻找一个我不能用iOS做的更通用的文件上传，我需要另一个答案。

在here处的Modernizr第57期谈论这个问题。现在Windows 8允许触摸和鼠标，这是棘手的。我成功使用了chriskeeble中间的代码。它依赖于Modernizr和代理检测。

Answer 5

Modernizr 3.0.0放弃了draganddrop检测，因为它不可靠：https://github.com/Modernizr/Modernizr/blob/master/CHANGELOG.md#v300

对于每个https://github.com/Modernizr/Modernizr/issues/57#issuecomment-35831605，您可以使用Wordpress方法作为解决方法：

var draganddrop = "draggable" in document.createElement("div") && !/Mobile|Android|Slick\/|Kindle|BlackBerry|Opera Mini|Opera Mobi/i.test(navigator.userAgent)

确定浏览器是否具有拖放能力？

5 个答案: