功能检测能够通过HTML文件输入删除文件 [英] Feature detection for ability to drop file over HTML file input

问题描述

我们可以检测浏览器是否支持通过< input type =file/> 删除文件？

例如，这可以在Chrome中使用，但不能在IE8中使用。

Modernizr .draganddrop 是一种可能性，但它是正确的选择吗？我不添加任何自定义拖放事件处理程序。

更新

为了验证Joe的答案，这里有一个应该停止文件放置的jQuery示例。通过Chrome和Firefox验证。

  $ yourFileInput.on（'drop'，function（）{
 return false; //如果Joe的解释是正确的，文件将不会被删除
}）; 
  

解决方案

我认为可能会帮助你。调整代码以针对Input而不是Div进行测试，并且测试Drop事件对我来说似乎很好。

转载此处，因此您不必点击通过（稍微调整，因为它似乎只需要检测这一功能）：

$ p $ 函数isEventSupported（eventName）{
var el = document.createElement（'input'）;
eventName ='on'+ eventName;
var isSupported =（el中的eventName）;
if（！isSupported）{
el.setAttribute（eventName，'return;'）;
isSupported = typeof el [eventName] =='function';
}
el = null;
return isSupported;
}
if（isEventSupported（'drop'））{
//浏览器支持将文件放到Input
上} else {
//后退，男人！
}


Can we detect whether a browser supports dropping a file over an <input type="file" />?

For example, this is possible in Chrome but not in IE8.

Modernizr.draganddrop is a possibility but is it the right choice? I'm not adding any custom drag/drop event handlers.

Update

To verify Joe's answer here's a jQuery example that should stop the file drop. Verified in Chrome and Firefox.

$yourFileInput.on('drop', function() {
    return false; // if Joe's explanation was right, file will not be dropped
});

解决方案

I think the answer to Detecting support for a given JavaScript event? may help you. Adjusting the code to test against Input instead of Div, and testing for the "Drop" event seems to work fine for me.

Reproduced here so you don't have to click through (and adjusted slightly, since it seems you only need to detect this one feature):

function isEventSupported(eventName) {
  var el = document.createElement('input');
  eventName = 'on' + eventName;
  var isSupported = (eventName in el);
  if (!isSupported) {
    el.setAttribute(eventName, 'return;');
    isSupported = typeof el[eventName] == 'function';
  }
  el = null;
  return isSupported;
}
if(isEventSupported('drop')){
  //Browser supports dropping a file onto Input
} else {
  //Fall back, men!
}

这篇关于功能检测能够通过HTML文件输入删除文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！