如何检测浏览器支持文件 API 拖放答案

【问题标题】：How to detect browser support File API drag n drop如何检测浏览器支持文件 API 拖放
【发布时间】：2011-06-29 08:55:36
【问题描述】：

我喜欢为支持拖放文件的浏览器在 div 上添加背景

虽然我不喜欢使用modernizr，只是一个单行脚本

【问题讨论】：

标签： javascript drag-and-drop fileapi

【解决方案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;
};

【讨论】：

不会工作。你不能只从框架中获取一个函数:) 你至少需要is 函数定义
感谢 anton_byrna！不幸的是 Chrome 支持它并警告错误！？！
奇怪的是，我在 Chrome 12.0.742.112 中检查了 'dragstart' 和 'drop' 它返回 true。 isFileAPIEnabled() 返回真；
没关系 - 有旧版本的 chrome。我将此问题标记为已回答谢谢！
支持'drop'事件并不意味着它支持FILE drop。 IE 8 支持 'drop' 事件。

【解决方案2】：

你可以使用：

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

【讨论】：

【解决方案3】：

如果您根本不想处理 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

【讨论】：

【解决方案4】：

checkout modernizr 用于 HTML5 拖放检测的源代码技术https://github.com/Modernizr/Modernizr/blob/master/feature-detects/draganddrop.js

【讨论】：

【解决方案5】：

除了这似乎错误地将 iOS 检测为支持拖放

【讨论】：

我也发现了这一点，但您应该将其作为对您所指答案的评论，而不是它自己对问题的回答。

【解决方案6】：

不知道为什么每个人都需要创建一个新元素来检查这一点。我认为只检查 body 元素是否支持拖动事件以及浏览器是否支持 File API 就足够了

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

【讨论】：