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

本文介绍了一种解决安卓手机在公众号网页上传图片时无法调用相机的方法,通过判断手机型号并给input元素添加特定属性,实现所有手机既能选择文件也能调用相机的功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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 却不是开放源代码的。

欢迎各位大佬留言讨论

### Android H5 微信公众号 MultipartFile 上传图片调用相册失败解决方案 对于部分 Android在微信公众号中的 H5 页面使用 `MultipartFile` 上传图片无法正常调用相册的问题,可以采取以下措施: #### 使用 uni-app 提供的选择文件 API 考虑到不同设备的支持情况,在前端可以选择使用 `uni.chooseImage()` 或者 `uni.chooseFile()` 方法来替代原生 HTML 的 `<input type="file">` 标签。这些方法能够更好地兼容移动平台并提供更稳定的用户体验[^2]。 ```javascript // 示例代码:使用uni.chooseImage()选择单张或多张图片 uni.chooseImage({ count: 9, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有 success: function (res) { const tempFilePaths = res.tempFilePaths; console.log(tempFilePaths); // 这里处理选好的图片路径数组tempFilePaths... } }); ``` #### 配置 JSSDK 并利用服务端代理获取媒体数据 针对某些特定场景下直接通过浏览器表单提交方式遇到困难的情况,建议采用间接的方式完成图片上传流程。即由客户端先将选定的照片发送至临时存储位置(如微信服务器),再通知应用后台依据所提供的 media_id 参数从微信公众平台上拉取实际的数据内容[^3]。 - **前端逻辑**:初始化 JS-SDK 接口权限验证,并执行拍照或选取照片操作; - **后端实现**:接收来自前端传递过来的服务 ID (`media_id`) ,向 WeChat API 发起请求下载对应的多媒体资料到自己的数据中心; 这种做法不仅绕过了可能存在的跨域限制问题,同时也简化了整个过程中的复杂度管理。 #### 关于 multiple 属性的注意事项 需要注意的是,如果目标是在多张图片选择功能上做优化,则应留意并非所有的 Android 设备都完全支持带有 `multiple` 属性的输入框。因此当发现此特性不可用时,移除该属性可能是必要的调整手段之一[^1]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

程序猿联盟

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

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

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

打赏作者

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

抵扣说明:

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

余额充值