Question

我知道如何检测拖放API，我知道如何检测FileReader和FileList功能。问题是现代移动浏览器可以处理所有这些事情，但他们显然不允许将文件丢弃到页面。

我在页面上有一个用户可以删除文件的区域，我想在不支持此功能的设备上隐藏此区域。

Answer 1

有关于这一点的Modernizr问题https://github.com/Modernizr/Modernizr/issues/57。目前唯一的方法是通过navigator.userAgent检测移动设备。

Answer 2

使用像Modernizr这样的库来检测各种各样的html5功能。

<强>更新

检查以确保浏览器支持HTML5 FileReader。假设确实如此，代码将附加到窗口的onload（）事件，以便在页面加载完成后声明drop元素。要让DIV接受已删除的项目，我们必须取消“dragover”和“dragenter”事件的默认行为：

if(window.FileReader) {

完成从桌面到浏览器教程的拖放：http://www.htmlgoodies.com/html5/javascript/drag-files-into-the-browser-from-the-desktop-HTML5.html#fbid=rxWgmrkH83W

要检测拖放支持，请使用拖放属性，如下所示：

if(Modernizr.draganddrop) {

如果您想在纯javascript （来自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')) {
  ...
}

对于File API：

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

<强>参考：

如何检测浏览器是否能够通过拖放接收文件

2 个答案: