如何检测浏览器是否支持文件API拖放功能

Question

我想在一个div上添加背景，但仅适用于支持文件拖放的浏览器

我不想使用modernizr，只需一行脚本即可

- Xaver

Answer 1

为什么不直接从Modernizr中复制所需的部分呢？

var isEventSupported = (function() {

      var TAGNAMES = {
        'select': 'input', 'change': 'input',
        'submit': 'form', 'reset': 'form',
        'error': 'img', 'load': 'img', 'abort': 'img'
      };

      function isEventSupported( eventName, element ) {

        element = element || document.createElement(TAGNAMES[eventName] || 'div');
        eventName = 'on' + eventName;

        // When using `setAttribute`, IE skips "unload", WebKit skips "unload" and "resize", whereas `in` "catches" those
        var isSupported = eventName in element;

        if ( !isSupported ) {
          // If it has no `setAttribute` (i.e. doesn't implement Node interface), try generic element
          if ( !element.setAttribute ) {
            element = document.createElement('div');
          }
          if ( element.setAttribute && element.removeAttribute ) {
            element.setAttribute(eventName, '');
            isSupported = typeof element[eventName] == 'function';

            // If property was created, "remove it" (by setting value to `undefined`)
            if ( typeof element[eventName] != 'undefined' ) {
              element[eventName] = undefined;
            }
            element.removeAttribute(eventName);
          }
        }

        element = null;
        return isSupported;
      }
      return isEventSupported;
    })();

使用方法：

if (isEventSupported('dragstart') && isEventSupported('drop')) {
  ...
}

同时针对文件 API：

var isFileAPIEnabled = function() {
  return !!window.FileReader;
};

- anton_byrna

---

不会起作用。你不能只从框架中取一个函数 :) 你至少需要 is 函数的定义。 - Emmerman

谢谢 anton_byrna！不幸的是，Chrome 支持它并且弹出 false！？！ - Xaver

奇怪的是，我在Chrome 12.0.742.112中检查'dragstart'和'drop'，它返回true。isFileAPIEnabled()也返回true； - anton_byrna

没关系 - 我有一个旧版本的Chrome。我已将此问题标记为已回答。谢谢！ - Xaver

支持“drop”事件并不意味着它支持文件拖放。IE 8支持“drop”事件。 - Rudie

此外，Safari用户将被拒绝访问，因为在Safari 5中，即使文件拖放已经得到支持，“return !!window.FileReader”也会返回false。 - Chris

Answer 2

如果您不想处理Modernizr，您可以复制它对于拖放检测所做的操作：

var supportsDragAndDrop = function() {
    var div = document.createElement('div');
    return ('draggable' in div) || ('ondragstart' in div && 'ondrop' in div);
}

从 Modernizr 的 GitHub 仓库获得：

https://github.com/Modernizr/Modernizr/blob/master/feature-detects/draganddrop.js

- German Latorre

Answer 3

您可以使用以下代码：

return 'draggable' in document.createElement('span') && typeof(window.FileReader) != 'undefined';

该代码与编程有关。

- Yoggi

Answer 4

检查使用modernizr源代码技术进行HTML5拖放检测https://github.com/Modernizr/Modernizr/blob/master/feature-detects/draganddrop.js

- pashaplus

Answer 5

除了这个似乎错误地将iOS识别为支持拖放

- terrinecold

---

我也发现了这个问题，不过你应该将它作为评论放在你所参考的答案下面，而不是作为问题的独立回答。 - Jimbo Jonny

Answer 6

不确定为什么每个人都需要创建一个新元素来检查这个。我认为只需检查body元素是否支持拖动事件以及浏览器是否支持File API即可。

supportsDragAndDrop(){
   body = document.body
   return ("draggable" in body || ("ondragstart" in body && "ondrop" in body)) 
        && window.FormData && window.FileReader
}

- Pithikos