通过HTML文件输入删除文件的功能检测

我们可以检测到浏览器是否支持通过<input type="file" />删除文件？通过HTML文件输入删除文件的功能检测

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

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

更新

为了验证此乔的回答是一个jQuery的例子，应停止文件下降。在Chrome和Firefox中验证。

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

来源

2012-10-26 Danyal Aytekin

你为什么想知道？ –

我正在增强页面的区域以接受文件，然后将文件上传（必要时使用iframe策略）。透明输入接收文件，然后移动到表单并发布。我不想为不支持该功能的浏览器添加输入。 –

个人而言，我会为每个浏览器添加输入。 –

我认为对Detecting support for a given JavaScript event?的回答可能会对您有所帮助。调整代码以针对输入而不是Div进行测试，并且对“Drop”事件进行测试似乎对我来说工作正常。

这里再现，因此您不必通过点击（及略为调整，因为它似乎你只需要检测这一项功能）：

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! 
}

来源

2012-10-27 21:22:19 joequincy

这是一个不错的方法。你是否确信这些浏览器实际上使用标准的“drop”事件来处理被输入的文件，而不是自己做的东西？ –

太好了，我已经证实你是对的，通过从drop事件中返回'false'并且观察到drop不起作用。谢谢乔。 –

随时欢迎！也建议upvoting在其他页面上的答案，因为该方法属于@ kangax，我只发现它，因为该职位:) – joequincy

通过HTML文件输入删除文件的功能检测

回答

相关问题