检测浏览器文件输入支持

Question

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

我已经仔细研究了这个问题,尽管BK的答案很好,但这并不是决定性的.

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

我知道iOS6将支持媒体上传,但尚未发布.还有其他人吗？Android怎么样？Windows Mobile？

Answer 1

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

亲自尝试一下!http://fiddle.jshell.net/nmGRu/show/ (如果您发现任何浏览器无法报告我想知道的正确结果...同样任何其他有效的浏览器将有助于完成此答案)

Safari(iOS 5及更低版本)将返回,false因为它不支持文件上传(特别是它允许您添加输入,但将其标记为已禁用)...但支持它的移动浏览器如三星Galaxy Tab(Android),BlackBerry PlayBook/BlackBerry 10(我在Dev Alpha上测试)将返回,true因为他们的浏览器支持上传.

到目前为止,正确的测试结果:

• Apple iPhone iOS 5及以下Safari(检测不支持)
• Apple iPhone iOS 6 Safari(检测支持 - 允许照片/视频选择)
• Apple iOS 4/iOS 5,越狱,安装了Safari上传启动器(检测支持)
• Apple iPhone w/Chrome(检测不支持)
• Apple iPhone带Opera Mini(检测支持 - 允许照片选择)
• Android版Chrome(检测支持)
• Android版Firefox(检测支持)
• Android版Opera(检测支持)
• BlackBerry OS7 SmartPhones(检测支持)
• BlackBerry PlayBook(检测支持)
• BlackBerry 10(Dev Alpha和Z10)(检测支持)
• HTC Desire(检测支持)
• 三星Galaxy Nexus(检测支持)
• 三星Galaxy Nexus S(检测支持)
• 三星Galaxy Nexus 7平板电脑(检测支持)
• 三星Galaxy Note(检测支持)
• 三星Galaxy S2(检测支持)
• 三星Galaxy S3(检测支持)
• 三星Galaxy Tab(检测支持)
• Tizen(检测支持)

到目前为止检测测试结果不正确:

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

注意:我正在修改此代码以解决Windows手机上的检测问题

这是一个干净的版本,只返回一个布尔值...并且不会污染页面.

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());