通過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文件輸入刪除文件的功能檢測

回答

相關問題