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 卻不是開放源代碼的。

歡迎各位大佬留言討論

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章