检测浏览器的文件输入支持 [英] Detect browser file input support

问题描述

据我所知，移动Safari不支持＆LT;输入类型=文件/＆GT; 。我想能够显示某种不支持信息，如果用户无法通过我的HTML表单上载文件。

I understand that Mobile Safari does not support <input type="file" />. I'd like to be able to display some sort of 'not supported' information if the user is unable to upload files via my HTML form.

我已经通过<一看href="http://stackoverflow.com/questions/4127829/detect-browser-support-of-html-file-input-element">this问题虽然BK的回答是不错的，它不是决定性的。

I have looked through this question and although BK's answer is good, it isn't conclusive.

难道或许更明智除去基于设备宽度的形式？我的意思是用于设备的宽度试验与 @media（最大设备宽度：480px）{} 。这是一个不错的办法？是否有直接支持文件上传在浏览器市场上的移动设备

Is it perhaps wiser to remove the form based on device width? By that I mean test for device width with @media (max-device-width: 480px) {}. Is this a bad approach? Are there mobile devices on the market that support file uploads directly in the browser?

我知道， iOS6将支持媒体上传< /一>，但它尚未释放。是否有其他人呢？如何Android的？ Windows Mobile的？

I know that iOS6 will support media uploads, but it isn't yet released. Are there others? How about Android? Windows Mobile?

推荐答案

我只是尝试了这一点...和它的作品...

I just tried this out... and it works...

试一试！ http://fiddle.jshell.net/nmGRu/show/ （如果你发现没有报告正确结果的任何浏览器我想知道......同上任何额外的那些工作，这将有助于完成这个答案）

Try it yourself! http://fiddle.jshell.net/nmGRu/show/ (if you find any browsers that fail to report the correct result I'd like to know... ditto for any additional that do work it would help complete this answer)

Safari浏览器（的iOS 5及以下）将返回假，因为它不支持文件上传（特别是它可以让你添加的输入，但其标志为禁用）.. 。支持它像三星Galaxy Tab（安卓），但手机浏览器，黑莓PlayBook /黑莓10（我测试的开发阿尔法）将返回真为他们的浏览器不支持上传。

Safari (iOS 5 and below) will return false as it does not support file uploads (specifically it lets you add the input, but flags it as disabled)... yet mobile browsers that support it like the Samsung Galaxy Tab (Android), BlackBerry PlayBook / BlackBerry 10 (I'm testing on the Dev Alpha) will return true as their browser does support uploads.

正确测试结果至今：

• 在苹果iPhone的iOS 5及以下的Safari浏览器（检测否支持）
• 在苹果iPhone的iOS 6 Safari浏览器（侦测支持 - 允许照片/视频选择）
• 在苹果的iOS 4/5的iOS，越狱，安装Safari浏览器上传的Enabler（检测支持）
• 在苹果iPhone W /镀铬（检测否支持）
• 在苹果iPhone瓦特/ Opera Mini的（检测支持 - 允许选照片）
• 在Chrome浏览器的Andr​​oid版本（检测支持）
• 的Firefox Android版（检测支持）
• 在歌剧的Andr​​oid版本（检测支持）
• 黑莓OS7智能电话（检测支持）
• 在黑莓PlayBook（检测支持）
• 在黑莓10（开发Alpha和Z10）（检测支持）
• 的HTC Desire（检测支持）
• 三星GALAXY Nexus（检测支持）
• 三星GALAXY Nexus S（检测支持）
• 三星GALAXY Nexus 7平板电脑（检测支持）
• 三星Galaxy Note（检测支持）
• 在三星Galaxy S2（检测支持）
• 在三星Galaxy S3（检测支持）
• 三星Galaxy Tab（检测支持）
• 在Tizen（检测支持）

• Apple iPhone iOS 5 and below Safari (detects NO support)
• Apple iPhone iOS 6 Safari (detects support - allows for photo/video selection)
• Apple iOS 4/iOS 5, jailbroken, Safari Upload Enabler installed (detects support)
• Apple iPhone w/Chrome (detects NO support)
• Apple iPhone w/Opera Mini (detects support - allows for photo selection)
• Android version of Chrome (detects support)
• Android version of Firefox (detects support)
• Android version of Opera (detects support)
• BlackBerry OS7 SmartPhones (detects support)
• BlackBerry PlayBook (detects support)
• BlackBerry 10 (Dev Alpha and Z10) (detects support)
• HTC Desire (detects support)
• Samsung Galaxy Nexus (detects support)
• Samsung Galaxy Nexus S (detects support)
• Samsung Galaxy Nexus 7 Tablet (detects support)
• Samsung Galaxy Note (detects support)
• Samsung Galaxy S2 (detects support)
• Samsung Galaxy S3 (detects support)
• Samsung Galaxy Tab (detects support)
• Tizen (detects support)

错误检测测试结果至今：

• 在Windows Phone的{}探戈（检测支持，但是它实际上并没有支持）

• Windows Phone {Tango} (detects support, but it does not actually have support)

注：我正在修订本code，解决了检测在Windows Phone 的

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

Here's a clean version that just returns a boolean... and doesn't pollute the page.

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

这篇关于检测浏览器的文件输入支持的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！