input上传图片安卓机无法选择相机

本文主要是介绍input上传图片安卓机无法选择相机，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

input上传图片安卓机无法选择相机

- 一、问题描述：
- 二、解决方案：
- 三、补充

一、问题描述：

遇到的问题，公众号网页内上传图片到服务器，使用以下代码上传图片。

<input type="file" accept="image/*"  class='img_oa' />

发现A手机点击上传的时候可以选择打开文件选择图片上传，或者选择打开相机拍照上传，但是B手机只能打开文件选择，不能打开相机。网上有人说给input加上属性 capture=‘camera’ 就可以选择相机了，但是加上这个属性后A手机只能打开相机用相机拍摄上传而不能打开文件选择图片了，如何做到所有手机都可以选择文件里的图片或选择相机拍摄呢。

二、解决方案：

使用js获取手机型号，给那些不能选择相机的手机加上 capture=‘camera’这个属性，能打开的就不管他。获取手机型号需要引入js插件 mobile-detect.js
代码如下：

<script src="__JS__/mobile-detect.js"></script><!--获取手机型号插件-->
<script>  //判断数组中是否包含某字符串  Array.prototype.contains = function(needle) {  for (i in this) {  if (this[i].indexOf(needle) > 0)  return i;  }  return -1;  }  var device_type = navigator.userAgent;//获取userAgent信息  //document.write(device_type);//打印到页面  var md = new MobileDetect(device_type);//初始化mobile-detect  var os = md.os(); var model = ""; if (os == "iOS") {os = md.os() + md.version("iPhone");  model = md.mobile();  } else if (os == "AndroidOS") {os = md.os() + md.version("Android");  var sss = device_type.split(";");var i = sss.contains("Build/");  if (i > -1) {  model = sss[i].substring(0, sss[i].indexOf("Build/"));  //获取到的手机型号}}alert(model);//这里记录不能打开相机的手机型号，当当前手机型号包含在里面的时候给input添加 capture=‘camera’ 属性var str = "TAS-AN00 JKM-AL00b SM-G9700";var mm = model.replace(/(^\s*)|(\s*$)/g, "");//去除空格var reg = RegExp(mm);if(reg.exec(str)){$('.img_add').attr('capture','camera');}
</script>

每个手机的型号可以在手机设置里面，关于手机那里看到。如图：
在这里插入图片描述
以上两个型号的手机都是只能选择文件不能打开相机的手机，我们只要把他的型号放到代码 str 变量里面就行了，发现是这个型号的手机我们就给input添加 capture=‘camera’ 的属性。这样就可以实现所有手机可以选择文件里的图片，也可以打开相机拍摄上传了。
这里只对安卓机做了处理，ios暂时没有发现存在这个问题

三、补充

实现完功能后我觉得这个问题的根本在于手机底层浏览器的内核不一样。不然不用判断机型，判断内核会更好，因为机型实在太多，找不全，要是是内核的原因的话就好办多了。获取手机浏览器内核的方式是，用手机自带的浏览器打开链接：http://ie.icoa.cn 结果如图：
在这里插入图片描述
查看了一个iphone和几个安卓手机，不管手机能不能调起相机，他们的浏览器内核都是webkit，只是版本不太一样，所以也不好从浏览器内核处理，可能决定因素不是这个内核吧，我也没有太搞清楚😓。