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

【问题标题】：Detect browser support of html file input element检测浏览器对 html 文件输入元素的支持
【发布时间】：2012-05-24 03:10:26
【问题描述】：

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

【问题讨论】：

标签： javascript html

【解决方案1】：

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

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

但是，它不适用于大多数 Android 设备，因为此函数始终返回 true，但会呈现带有文本“上传已禁用”的按钮。

【讨论】：

【解决方案2】：

你可以写一个函数来做虚拟测试：

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

如果你只想执行一次更好：

var SUPPORT_INPUT_FILE = supportInputType("file");

那么你就可以在你的所有代码中使用这个"constant"了。

测试的工作方式：首先它创建一个虚拟元素。它将具有默认的type = "text"。接下来，您尝试将其设置为file。如果浏览器不支持这种类型，它将保持为text。

玩得开心！

【讨论】：

这是个好主意，但在 iPhone 上测试会返回 true，即使它实际上不支持渲染文件输入。

【解决方案3】：

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

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

【讨论】：