檢測是否支持</輸入類型=「文件」>

Question

我建立我的網站的移動版本，其中有一個文件上傳工具，訪問通過「上傳按鈕」

我想隱藏按鈕從iPhone用戶，因爲控制只是顯得灰 - 這可能嗎？

我真的不想檢測iPhone;我覺得這將是更好的檢測功能 - 使得它開始自動工作應蘋果啓用這個（或手機越獄，或東西...）

Answer 1

功能檢查input[type=file]是否已實現：

function isInputTypeFileImplemented() { 
    var elem = document.createElement("input"); 
    elem.type = "file"; 
    if (elem.disabled) return false; 
    try { 
     elem.value = "Test"; // Throws error if type=file is implemented 
     return elem.value != "Test"; 
    } catch(e) { 
     return elem.type == "file"; 
    } 
} 

小提琴：http://jsfiddle.net/8EqEE/9

Answer 2

請注意，我沒有測試過這一點，所以我不知道是否會工作。這基本上就是您如何測試對HTML5輸入類型的支持（例如<input type="color" />）。但是你可以嘗試一下：

function upload_supported() { 
    var file_input = document.createElement("input"); 
    file_input.setAttribute("type", "file"); 
    return file_input.type !== "text"; 
} 

這是基於當它遇到一個未知的輸入型type屬性重置爲text的瀏覽器的行爲。但是，既然你說它變灰了，這意味着它本身並不是未知數。

Answer 3

創建一個<input type="file">並檢查它是否被禁用。

function isFileUploadImpossible() { 
    var el = document.createElement("input"); 
    el.setAttribute("type", "file"); 
    return el.disabled; 
} 

在iOS 4.2.1，Android 2.3.4，Chrome 17，Firefox 11，IE7測試。

Answer 4

我也一直在尋找解決這個問題的方法。它不像這裏已經提出的解決方案那麼簡單。一些瀏覽器聲稱支持某些類型，但其中一些類型由於不完整而被禁用。所以最終發生的事情是，當你返回InputElement.type時，它可能會返回爲「文件」類型或「tel」或「數字」，但它仍然被瀏覽器視爲「文本」。可惜我不認爲你可以做這個atm，除非你可以讓瀏覽器開發人員修復它，以便禁用類型作爲文本返回。

作爲補充說明IE將所有不支持的類型作爲文本返回。我已經使用最新版本的Chrome和FF進行了測試。鉻「謊言」關於支持數字，我知道迄今爲止的電話類型，FF也不支持時返回電話。我確信這種情況也會發生在其他類型中。

Answer 5

基於價值的錯誤檢查（try/catch）加上禁用檢查的混合似乎能夠覆蓋我們測試的所有PC和移動瀏覽器。

alert((function isInputTypeFileImplemented(){ 
    var elem; 
    try { 
    elem = document.createElement("input"); 
    elem.type = "file"; 
    } catch(e) { 
    return -1; // type=file is not implemented 
    } 
    try { 
    elem.value = "Test"; 
    if (elem.value == "Test") { 
     return -2; // type=file should throw an error on line above 
    } else { 
     if (elem.disabled) { 
     return -3; // type=file disabled in iOS < 6 
     } else { 
     return true; 
     } 
    } 
    } catch(e){ 
    return true; // type=file implemented correctly 
    } 
})()) 

注意：如果您更喜歡不同的流程，您可以更改邏輯順序。

小提琴：http://jsfiddle.net/BRk5J/

Answer 6

UPDATE：這是現在的Modernizr一部分了。

有一個pull request for modernizr似乎工作。本質上它只是檢查：

var elem = document.createElement('input'); 
elem.type = 'file'; 
return !elem.disabled; 

Answer 7

更新到上面支持iOS 5 + iOS 6 Beta的Rob W的解決方案。 （導致一個例外不是我會推薦的，但這是有效的）：

 function isInputTypeFileImplemented(){ 
     var elem = document.createElement("input"); 
     elem.type = "file"; 
     try { 
      elem.value = "Test"; //If type=file is implemented, this would throw an 
      if (elem.disabled) { 
       return false; 
      } else { 
       return true; 
      } 
     } catch(e){ 
      return false; 
     } 
    }