檢測HTML文件輸入元素的瀏覽器支持

有沒有用javascript/jquery/crazy-css-hack來檢測用戶瀏覽器是否支持呈現功能<input type="file" />文件上傳元素的方法？例如，iOS上的safari瀏覽器不會呈現該元素，而是希望向用戶顯示一條消息，表明該功能不受支持。我知道我可以檢查用戶代理並檢查它是否是iphone/ipad /等，但我不知道其他瀏覽器做了什麼或不支持它，或將來還是不會支持它。檢測HTML文件輸入元素的瀏覽器支持

來源

2010-11-08 bkaid

Galambalazs的回答指出了我僅適用於iOS的正確方向。最後我用這樣的：

function supportsFileInput() { 
    var dummy = document.createElement("input"); 
    dummy.setAttribute("type", "file"); 
    return dummy.disabled === false; 
}

然而，它並不適用於大多數Android設備的工作，因爲這個函數總是返回true，但呈現按鈕文本「上傳已禁用」。

來源

2010-11-08 21:47:16 bkaid

您可以編寫一個函數來做到僞測試：

function supportInputType(type) { 
    var dummy = document.createElement("input"); 
    dummy.setAttribute("type", type); 
    return dummy.type !== "text"; 
}

更重要的是，如果你想只執行一次：

var SUPPORT_INPUT_FILE = supportInputType("file");

然後你可以使用這個「常數」在你所有的代碼中。

測試的工作方式：首先創建一個虛擬元素。它將有默認的type = "text"。接下來，您嘗試將其設置爲file。如果瀏覽器不支持這種類型，它將保持text。

玩得開心！

來源

2010-11-08 20:43:18 galambalazs

這是一個好主意，但在iPhone上測試返回true，即使它實際上不支持渲染文件輸入。 – bkaid 2010-11-08 21:25:05

iOS將文件輸入元素渲染爲「禁用」。因此，您可以測試是否有禁用的輸入字段。我用jQuery來做到這一點。

jQuery(function($) { 
    $(this).find('[type=file]').each(function() { 
     if ($(this).attr('disabled')) { 
     // do sth. 
     }  
    }) 
});

來源

2012-05-23 19:10:26 Jonas

檢測HTML文件輸入元素的瀏覽器支持

回答

相關問題