android - 检测浏览器文件输入支持

Question

我知道 Mobile Safari 不支持 <input type="file" /> .如果用户无法通过我的 HTML 表单上传文件，我希望能够显示某种“不受支持”的信息。

我已经看过 this question虽然 BK 的回答很好，但不是决定性的。

删除基于设备宽度的表单可能更明智吗？我的意思是用 @media (max-device-width: 480px) {} 测试设备宽度.这是一个不好的方法吗？市面上有支持直接在浏览器上传文件的移动设备吗？

我知道iOS6 will support media uploads ，但尚未发布。还有其他人吗？安卓呢？ Windows 移动版？

Answer 1

我刚试过这个...它有效...

自己试试吧! http://fiddle.jshell.net/nmGRu/show/ (如果您发现任何浏览器无法报告正确的结果，我想知道……同上，对于任何其他有效的浏览器，它都将有助于完成此答案)

Safari(iOS 5 及以下版本)将返回 false，因为它不支持文件上传(特别是它允许您添加输入，但将其标记为禁用)...但是支持的移动浏览器它像 Samsung Galaxy Tab (Android)、BlackBerry PlayBook/BlackBerry 10(我正在 Dev Alpha 上测试)将返回 true，因为它们的浏览器确实支持上传。

到目前为止

正确测试结果:

• Apple iPhone iOS 5 及更低版本的 Safari(检测到NO 支持)
• Apple iPhone iOS 6 Safari(检测支持 - 允许选择照片/视频)
• Apple iOS 4/iOS 5，已越狱，已安装 Safari Upload Enabler(检测到支持)
• Apple iPhone w/Chrome(检测到不支持)
• Apple iPhone w/Opera Mini(检测支持 - 允许选择照片)
• Android 版 Chrome(检测支持)
• Android 版 Firefox(检测支持)
• Android 版 Opera(检测支持)
• BlackBerry OS7 智能手机(检测支持)
• BlackBerry PlayBook(检测支持)
• BlackBerry 10(Dev Alpha 和 Z10)(检测支持)
• HTC Desire(检测支持)
• Samsung Galaxy Nexus(检测支持)
• Samsung Galaxy Nexus S(检测支持)
• Samsung Galaxy Nexus 7 平板电脑(检测支持)
• Samsung Galaxy Note(检测支持)
• Samsung Galaxy S2(检测支持)
• Samsung Galaxy S3(检测支持)
• Samsung Galaxy Tab(检测支持)
• Tizen(检测支持)

到目前为止，

不正确检测测试结果:

• Windows Phone {Tango}(检测到支持，但它实际上没有支持)

注意:我正在修改此代码以解决在 windows phone 上的检测

这是一个干净的版本，它只返回一个 bool 值......并且不会污染页面。

function hasFileUploadSupport(){
  var hasSupport = true;
  try{
    var testFileInput = document.createElement('input');
    testFileInput.type = 'file';
    testFileInput.style.display = 'none';
    document.getElementsByTagName('body')[0].appendChild(testFileInput);
    if(testFileInput.disabled){
      hasSupport = false;
    }
  } catch(ex){
     hasSupport = false;
  } finally {
    if(testFileInput){
      testFileInput.parentNode.removeChild(testFileInput);
    }
  }
  return hasSupport;
}

alert(hasFileUploadSupport());