检测是否支持</输入类型=“文件”>

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