如何检测浏览器支持文件API拖动下拉

本文介绍了如何检测浏览器支持文件API拖动下拉的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我喜欢在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; };