检测浏览器对html文件输入元素的支持

Question

有没有办法使用javascript/jquery/crazy css-hack来检测用户的浏览器是否支持呈现一个功能性的<input type="file" />文件上传元素？例如，iOS上的safari浏览器不会呈现元素，而我想向用户显示一条消息，告诉用户该功能不受支持。我知道我可以检查用户代理，看看它是不是iphone/ipad/等，但我不知道其他浏览器支持或不支持它，或者将来会或不会支持它。

Answer 1

Galambalazs的回答只为iOS指明了正确的方向。我最终使用了这个：

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

然而，它对大多数Android设备不起作用，因为这个函数总是返回true，但会在按钮上显示文本"Uploads disabled“。

Answer 2

您可以编写一个函数来执行虚拟测试

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。

玩得开心!

Answer 3

iOS将文件输入元素呈现为“已禁用”。因此，您可以测试是否有禁用的输入字段。我使用jQuery来做到这一点。

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