Question

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

我查看this question虽然BK的答案很好，但并不是最终结论。

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

我知道iOS6 will support media uploads，但尚未发布。还有其他人吗？ 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（检测 NO 支持）
Apple iPhone iOS 6 Safari（检测支持 - 允许选择照片/视频）
Apple iOS 4 / iOS 5，越狱，安装了Safari上传启动器（检测支持）
Apple iPhone w / Chrome（检测 NO 支持）
Apple iPhone w / 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());

检测浏览器文件输入支持

1 个答案: