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

Question

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

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

- homm

---

我认为，“他们显然不允许将文件拖到页面上”这部分应该放在“设备”一词之后，以使其更有意义 ;) - mktums

Answer 1

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

- Roman Pominov

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')) {
  ...
}

关于文件 API：

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

参考资料：

1. http://modernizr.com/docs/
2. 已经回答的 Stack Overflow 问题 how-to-detect-browser-support-file-api-drag-n-drop

- Shaik Mahaboob Basha

---

我知道如何检测拖放API，也知道如何检测FileReader和FileList功能。问题是现代移动浏览器可以处理所有这些内容，但它们显然不允许向页面拖放文件。 - homm

@homm，您需要检查一下window.FileReader并实现拖放功能，请访问http://www.htmlgoodies.com/html5/javascript/drag-files-into-the-browser-from-the-desktop-HTML5.html。 - Shaik Mahaboob Basha

FileReader并不能回答“浏览器是否可以通过拖放接收文件”的问题。至少移动版Safari拥有FileReader和拖放API，但不允许通过拖放接收文件。 - homm