WebView加載H5界面無(wú)法調(diào)用手機(jī)本地圖庫(kù)和相機(jī)

Android 的WebView有一個(gè)坑贬派,當(dāng)接入的H5當(dāng)中如果有上傳圖片或者其他文件的時(shí)候,點(diǎn)擊添加按鈕是沒(méi)有任何反應(yīng)的量愧,但是IOS不會(huì)有這個(gè)問(wèn)題

問(wèn)題根因:H5訪(fǎng)問(wèn)本地文件的時(shí)候蔓纠,使用的是標(biāo)簽<input type="file">,WebView處于安全性的考慮限制了這個(gè)操作羞反,所以H5是無(wú)法直接訪(fǎng)問(wèn)到安卓的本地文件的布朦。

解決辦法:重寫(xiě)WebviewChromeClient 中的WebviewChromeClient openFileChooser() 和onShowFileChooser()方法響應(yīng)<input type="file">,然后通過(guò)本地代碼調(diào)起圖庫(kù)昼窗,拍照或者本地文件夾選擇的功能是趴,左后在最后在 onActivityResult 把選擇的圖片 URI 回傳WebviewChromeClient

注意點(diǎn):
1. 在Activity中加載H5
2.Fragment中加載H5

代碼示例:

      var uploadMessage: ValueCallback<Uri?>? = null
      var uploadMessageAboveL: ValueCallback<Array<Uri?>?>? = null

        webView.webChromeClient = object : WebChromeClient() {
            // For Android < 3.0
            fun openFileChooser(valueCallback: ValueCallback<Uri?>?) {
                uploadMessage = valueCallback
     // 自己實(shí)現(xiàn)的打卡圖庫(kù)和調(diào)起攝像頭的方法
                openImageChooserActivity()
            }

            // For Android  >= 3.0
            fun openFileChooser(valueCallback: ValueCallback<*>?, acceptType: String?) {
                uploadMessage = valueCallback as ValueCallback<Uri?>?
     // 自己實(shí)現(xiàn)的打卡圖庫(kù)和調(diào)起攝像頭的方法
                openImageChooserActivity()
            }

            //For Android  >= 4.1
            fun openFileChooser(
                valueCallback: ValueCallback<Uri?>?,
                acceptType: String?,
                capture: String?
            ) {
                uploadMessage = valueCallback
      // 自己實(shí)現(xiàn)的打卡圖庫(kù)和調(diào)起攝像頭的方法
                openImageChooserActivity()
            }

            // For Android >= 5.0
            override fun onShowFileChooser(
                webView: WebView,
                filePathCallback: ValueCallback<Array<Uri?>?>,
                fileChooserParams: FileChooserParams
            ): Boolean {
                uploadMessageAboveL = filePathCallback
         // 自己實(shí)現(xiàn)的打卡圖庫(kù)和調(diào)起攝像頭的方法   
                openImageChooserActivity()
                return true
            }
        }

在Activity中加載H5

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
        super.onActivityResult(requestCode, resultCode, data)
        if (resultCode == Activity.RESULT_OK) {
            when (requestCode) {
                CHOOSE_CERTIFICATE_IMAGE_ALBUM_REQUEST_CODE -> { //相簿
                    if (null == uploadMessage && null == uploadMessageAboveL) return
                    val pictures: java.util.ArrayList<PictureInfo>? = data?.getParcelableArrayListExtra<PictureInfo>("pictures")
                    var uri : Uri? = null
                    pictures?.takeIf { pictures.size > 0 }?.let {
                        if(!pictures[0].path.isNullOrEmpty()){
                            uri = Uri.fromFile(File( pictures[0].path))
                        }
                    }
                    if (uploadMessageAboveL != null) {
                        if(uri == null){
                            uploadMessageAboveL?.onReceiveValue(null)
                        }else{
                            uploadMessageAboveL?.onReceiveValue(arrayOf(uri))
                        }
                        uploadMessageAboveL = null
                    } else if (uploadMessage != null) {
                        uploadMessage?.onReceiveValue(uri)
                        uploadMessage = null
                    }

                }

                SetImgUtil.CODE_CAMERA_REQUEST -> { //拍照
                    val file = SetImgUtil.getOutputMediaFile(this, mCameraCacheFileName)
                    val uri = Uri.fromFile(file)
                    if (null == uploadMessage && null == uploadMessageAboveL) return
                    if (uploadMessageAboveL != null) {
                        if(uri == null){
                            uploadMessageAboveL?.onReceiveValue(null)
                        }else{
                            uploadMessageAboveL?.onReceiveValue(arrayOf(uri))
                        }
                        uploadMessageAboveL = null
                    } else if (uploadMessage != null) {
                        uploadMessage?.onReceiveValue(uri)
                        uploadMessage = null
                    }
                }
                else->{
                    //這里uploadMessage跟uploadMessageAboveL在不同系統(tǒng)版本下分別持有了
                    //WebView對(duì)象,在用戶(hù)取消文件選擇器的情況下澄惊,需給onReceiveValue傳null返回值
                    //否則WebView在未收到返回值的情況下唆途,無(wú)法進(jìn)行任何操作富雅,文件選擇器會(huì)失效
                    if (uploadMessage != null) {
                        uploadMessage?.onReceiveValue(null)
                        uploadMessage = null
                    } else if (uploadMessageAboveL != null) {
                        uploadMessageAboveL?.onReceiveValue(null)
                        uploadMessageAboveL = null
                    }
                }
            }
        }else{
            //這里uploadMessage跟uploadMessageAboveL在不同系統(tǒng)版本下分別持有了
            //WebView對(duì)象,在用戶(hù)取消文件選擇器的情況下肛搬,需給onReceiveValue傳null返回值
            //否則WebView在未收到返回值的情況下吹榴,無(wú)法進(jìn)行任何操作,文件選擇器會(huì)失效
            if (uploadMessage != null) {
                uploadMessage?.onReceiveValue(null)
                uploadMessage = null
            } else if (uploadMessageAboveL != null) {
                uploadMessageAboveL?.onReceiveValue(null)
                uploadMessageAboveL = null
            }
        }
    }

在Fragment中加載H5

在Fragment加載H5需要在Fragment所在的Activity中的onActivityResult中接收數(shù)據(jù)滚婉,接收到到的數(shù)據(jù)可以通過(guò)廣播或者EventBus等方式傳遞到Fragment图筹,數(shù)據(jù)解析和回傳給H5的方式和上面的onActivityResult中處理方式一樣

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市让腹,隨后出現(xiàn)的幾起案子远剩,更是在濱河造成了極大的恐慌,老刑警劉巖骇窍,帶你破解...
    沈念sama閱讀 212,816評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件瓜晤,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡腹纳,警方通過(guò)查閱死者的電腦和手機(jī)痢掠,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,729評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)嘲恍,“玉大人足画,你說(shuō)我怎么就攤上這事〉枧#” “怎么了淹辞?”我有些...
    開(kāi)封第一講書(shū)人閱讀 158,300評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀(guān)的道長(zhǎng)俘侠。 經(jīng)常有香客問(wèn)我象缀,道長(zhǎng),這世上最難降的妖魔是什么爷速? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,780評(píng)論 1 285
  • 正文 為了忘掉前任央星,我火速辦了婚禮,結(jié)果婚禮上惫东,老公的妹妹穿的比我還像新娘莉给。我一直安慰自己,他們只是感情好凿蒜,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,890評(píng)論 6 385
  • 文/花漫 我一把揭開(kāi)白布禁谦。 她就那樣靜靜地躺著,像睡著了一般废封。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上丧蘸,一...
    開(kāi)封第一講書(shū)人閱讀 50,084評(píng)論 1 291
  • 那天漂洋,我揣著相機(jī)與錄音遥皂,去河邊找鬼。 笑死刽漂,一個(gè)胖子當(dāng)著我的面吹牛演训,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播贝咙,決...
    沈念sama閱讀 39,151評(píng)論 3 410
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼样悟,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了庭猩?” 一聲冷哼從身側(cè)響起窟她,我...
    開(kāi)封第一講書(shū)人閱讀 37,912評(píng)論 0 268
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎蔼水,沒(méi)想到半個(gè)月后震糖,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,355評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡趴腋,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,666評(píng)論 2 327
  • 正文 我和宋清朗相戀三年吊说,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片优炬。...
    茶點(diǎn)故事閱讀 38,809評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡颁井,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出蠢护,到底是詐尸還是另有隱情蚤蔓,我是刑警寧澤,帶...
    沈念sama閱讀 34,504評(píng)論 4 334
  • 正文 年R本政府宣布糊余,位于F島的核電站秀又,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏贬芥。R本人自食惡果不足惜吐辙,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,150評(píng)論 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望蘸劈。 院中可真熱鬧昏苏,春花似錦、人聲如沸威沫。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,882評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)棒掠。三九已至孵构,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間烟很,已是汗流浹背颈墅。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,121評(píng)論 1 267
  • 我被黑心中介騙來(lái)泰國(guó)打工蜡镶, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人恤筛。 一個(gè)月前我還...
    沈念sama閱讀 46,628評(píng)論 2 362
  • 正文 我出身青樓官还,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親毒坛。 傳聞我的和親對(duì)象是個(gè)殘疾皇子望伦,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,724評(píng)論 2 351

推薦閱讀更多精彩內(nèi)容