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，但呈现的文本为“上传已禁用”。

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

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

3 个答案: