5

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

我已经查看了这个问题，虽然 BK 的答案很好，但它不是决定性的。

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

我知道iOS6 会支持媒体上传，但还没有发布。还有其他人吗？安卓呢？视窗手机？

4

1 回答 1

17

我刚试过这个......它的工作原理......

自己试试吧！http://fiddle.jshell.net/nmGRu/show/ （如果您发现任何浏览器未能报告我想知道的正确结果...同上任何其他的工作，这将有助于完成这个答案）

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

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

  • Apple iPhone iOS 5 及以下 Safari（检测到不支持）
  • 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（检测支持）
  • 黑莓 OS7 智能手机（检测支持）
  • 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 phone 上的检测问题

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

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());
于 2012-09-18T15:41:02.123 回答