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,只是版本不太一样,所以也不好从浏览器内核处理,可能决定因素不是这个内核吧,我也没有太搞清楚😓。

webkit是由苹果公司通过开源的KHTML改进而来的,最后开发出了著名的 Safari , Safari 是一个相当成功的产品,但是 Safari 却不是开放源代码的。

欢迎各位大佬留言讨论

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序猿联盟

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值