Question

我正在制作我的网站的移动版本，该版本具有文件上传工具，可通过“上传按钮”访问

我想隐藏iPhone用户的按钮，因为控件只显示为灰色 - 这可能吗？

我真的不想检测iPhone;我觉得检测这个功能要好得多 - 如果Apple启用它（或者手机是Jailbroken，或其他东西......），它会自动开始工作。

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

更新：现在已成为Modernizr的一部分。

有pull request for modernizr似乎有效。基本上它只是检查：

var elem = document.createElement('input');
elem.type = 'file';
return !elem.disabled;

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

请注意，我没有测试过这个，所以我不确定它是否会起作用。这基本上是您测试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 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

更新Rob W的解决方案，也支持iOS 5 + iOS 6 Beta。（导致异常不是我推荐的，但是这有效）：

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

Answer 7

我也一直在寻找这个问题的解决方案。它并不像这里提出的解决方案那么简单。一些浏览器声称支持某些类型，但由于不完整性，某些类型已被禁用。所以最终发生的事情是当你返回InputElement.type它可能返回“文件”类型或“tel”或“数字”但它仍被浏览器视为“文本”..可悲的是我不认为你可以执行此操作，除非您可以与浏览器开发人员联系以修复它，以便禁用的类型作为文本返回..

作为添加的注释，IE将所有不受支持的类型作为文本返回。我用最新版本的Chrome和FF测试了这个。 Chrome“谎称”支持我目前为止所知道的数字和电话类型，而且当不支持时，FF也会返回电话。我确信这也适用于其他类型。

检测是否支持<input type =“file”/>

7 个答案: