检测浏览器是否支持HTML文件输入元素

Question

有没有一种方法可以使用javascript/jquery/crazy-css-hack来检测用户的浏览器是否支持渲染功能性的文件上传元素？例如，iOS上的safari浏览器不会渲染该元素，我想向用户显示一个消息，告诉他们该功能不受支持。我知道可以检查用户代理并查看它是否为iphone/ipad等设备，但我不知道其他浏览器是否支持它，或将来是否支持它。

- bkaid

Answer 1

Galambalazs的答案为我指明了iOS方向。最终我使用了以下代码：

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

然而，这个功能对大多数Android设备无效，因为它始终返回true，但会渲染带有“上传已禁用”文本的按钮。

- bkaid

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。

玩得开心！

- gblazex

---

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

Answer 3

iOS将文件输入元素呈现为“禁用”。因此，您可以测试是否存在禁用的输入字段。我使用jQuery来实现。

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

- Jonas