如何检测浏览器支持文件API拖动下拉 [英] How to detect browser support File API drag n drop

问题描述

我喜欢在div上添加一个背景，仅用于支持拖放功能的浏览器。下载文件

我不喜欢使用modernizr，只是一行脚本

解决方案

为什么不从Modernizr复制所需的部件？

  var isEventSupported =（function（）{
 
 var TAGNAMES = {
'select'：'input'，'change'：'input'，
'submit'：'form'，'reset' ，
'error'：'img'，'load'：'img'，'abort'：'img'
}; 
 
函数isEventSupported（eventName，element）{ 
 
 element = element || document.createElement（TAGNAMES [eventName] ||'div'）; 
 eventName ='on'+ eventName; 
 
 //当使用setAttribute时，IE跳过卸载，WebKit跳过卸载和调整大小，而incatch这些
 var isSupported =元素中的eventName; 
 
 if （！isSupported）{
 //如果没有`setAtt ribute（即不实现Node接口），尝试通用元素
 if（！element.setAttribute）{
 element = document.createElement（'div'）; 
} 
 if（element.setAttribute&& element.removeAttribute）{
 element.setAttribute（eventName，''）; 
 isSupported = typeof element [eventName] =='function'; 
 
 //如果属性被创建，删除它（通过将值设置为'undefined`）
 if（typeof element [eventName]！='undefined'）{
 element [eventName] = undefined; 
} 
 element.removeAttribute（eventName）; 
} 
} 
 
元素= null; 
 return isSupported; 
} 
 return isEventSupported; 
}）（）; 
  

用法：

 code> if（isEventSupported（'dragstart'）&& isEventSupported（'drop'））{
 ... 
} 
  pre> 
 
 
对于文件API：
  var isFileAPIEnabled = function ）{
 return !! window.FileReader; 
}; 
  
 
I like to add a background on a div only for browsers which support drag & drop for files

I don't like to use modernizr though, just a one line script
解决方案
Why not just copy required parts from 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;
    })();
Usage:
if (isEventSupported('dragstart') && isEventSupported('drop')) {
  ...
}
And for File API:
var isFileAPIEnabled = function() {
  return !!window.FileReader;
};


                        
这篇关于如何检测浏览器支持文件API拖动下拉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！