WebView选择文件

之前开发的时候都没有注意到,在webview的页面里面,如果有个地方要选择图片,不管怎么点击都不会自动帮你跳转到选择图片或者选择文件的页面,不管怎么点击都是没反应。
在ios里面是点击能自动跳转的,而android不行,所以需要自己去写跳转的逻辑。

1.监听H5页面点击选择文件

在WebChromeClient中,有一个方法可以监听H5选择文件。低版本是openFileChooser,高版本是onShowFileChooser,我们需要在WebChromeClient重写这些方法。

public class MyWebChromeClient extends WebChromeClient {

    private WebFileChoseListener webFileChoseListener;
    // 3.0 + 调用这个方法
    public void openFileChooser(ValueCallback filePathCallback, String acceptType) {
        if (webFileChoseListener!= null){
            webFileChoseListener.getFile(filePathCallback);
        }
    }

    // Android > 4.1.1 调用这个方法
    public void openFileChooser(ValueCallback<Uri> filePathCallback, String acceptType, String capture) {
        if (webFileChoseListener!= null){
            webFileChoseListener.getFile(filePathCallback);
        }
    }

    // Android > 5.0 调用这个方法
    @Override
    public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) {
        if (webFileChoseListener!= null){
            webFileChoseListener.getFile(filePathCallback);
        }
        return true;
    }

    public void setBnWebFileChoseListener(WebFileChoseListener webFileChoseListener) {
        this.webFileChoseListener= webFileChoseListener;
    }
}

不要在WebChromeClient 里面写逻辑,单一职权嘛,所以我们写个监听回调给外层。这里写了3个函数是因为我的最小版本是3.1,所以都写上,如果最小版本是3.0以下,还要多写个方法,这个可以在网上找到。最后看看我们监听回调的接口。

public interface WebFileChoseListener {

    void getFile(ValueCallback valueCallback);

}

接收返回的filePathCallback是ValueCallback类型,之后我们会用这个对象把本地图片的uri传回去。

2.跳转相册

在外部重写getFile方法

    @Override
    public void getFile(ValueCallback valueCallback) {
        this.valueCallback = valueCallback;
        Intent intent = new Intent(Intent.ACTION_PICK,MediaStore.Images.Media.EXTERNAL_CONTENT_URI);
        intent.setDataAndType(MediaStore.Images.Media.EXTERNAL_CONTENT_URI,"image/*");
        startActivityForResult(intent, Constant.INTENT_PHONE);
    }

就直接跳转相册就好了,这里只是我的写法,跳转相册、跳转文件夹这些爱怎么写怎么写,这里的逻辑就已经变成普通跳转逻辑了,我的目的就是拿到uri就行,我不管你跳不跳转或者跳转到哪个页面,只要最终拿到uri返回给h5就行。

3.返回结果给h5

我上面是跳转系统相册,获取图片成功肯定会回调给onActivityResult

    @Override
    public void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        if (requestCode == BnConstant.INTENT_PHONE){
            if (resultCode == Activity.RESULT_OK) {
                WebUtils.seleteH5Phone(data, valueCallback);
            }
        }
    }

valueCallback在上面this.valueCallback = valueCallback有保存到全局变量。WebUtils写个工具类,免得每次都要重复写这堆逻辑。

public class WebUtils {

    public static void seleteH5File(Intent data, ValueCallback valueCallback){
        if (valueCallback == null){
            // todo valueCallback 为空的逻辑
            return;
        }
        try {
            Uri[] results = null;
            String dataString = data.getDataString();
            if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.JELLY_BEAN) {
                ClipData clipData = data.getClipData();
                if (clipData != null) {
                    results = new Uri[clipData.getItemCount()];
                    for (int i = 0; i < clipData.getItemCount(); i++) {
                        ClipData.Item item = clipData.getItemAt(i);
                        results[i] = item.getUri();
                    }
                }
            }

            if (dataString != null) {
                results = new Uri[]{Uri.parse(dataString)};
                valueCallback.onReceiveValue(results);
            }
        }catch (Exception e){
            e.printStackTrace();
        }
        valueCallback = null;
    }

}

这个valueCallback.onReceiveValue()在5.0 以上要传Uri[]才行,单传uri是没用的。回调中的参数也有泛型ValueCallback<Uri[]>,传对应的就行,所以我这里是没对旧版本的进行兼容。

4. H5页面的按钮无法再次点击

有的朋友可能会发生这种情况,H5页面的按钮第二次没法点击。加入第一次点击之后,我跳到了相册,我没有选图片,直接返回。之后再点H5页面的按钮就会没反应。
这是因为前一次没把结果回传给H5。
所以要在某些地方加上valueCallback.onReceiveValue(null),就算选择失败,也要返回。
将上面代码改为

    @Override
    public void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
         if (requestCode == Constant.INTENT_PHONE){
            if (resultCode == Activity.RESULT_OK) {
                BnWebUtils.seleteH5File(data, valueCallback);
            }else {
                valueCallback.onReceiveValue(null);
                valueCallback = null;
            }
        }
    }
public class WebUtils {

    public static void seleteH5File(Intent data, ValueCallback valueCallback){
       ......
        try {
           ......
        }catch (Exception e){
            e.printStackTrace();
            valueCallback.onReceiveValue(null);
        }
        valueCallback = null;
    }

}

这部分逻辑也并非很复杂,只是很容易被忽视,就算你在某个项目写了,隔时间长了,下个项目也不一定会记得,所以要记录下来。


这还没过一天就踩坑了。
问题:在android 4.4的手机上既不会调用openFileChooser方法也不会调用onShowFileChooser方法
在网上找,有人说是混淆,也许在其它地方还真跟混淆有点关系,但这里真不是混淆的问题。据说是因为谷歌在4.4的时候删除了openFileChooser方法,网上有些地方也给出了解决方法。大部分都是两种:
(1)方法1:使用其它的第三方webview框架,抱歉,我没时间去一个一个试。
(2)方法2:不用这种套路,自己和H5做交互。那如果不是自己的H5页面咋整。

于是我想看看QQ浏览器是怎么解决的,结果发现在4.4的手机上QQ浏览器也选不了图片(不知道会不会是模拟器的影响)。于是我用4.3的版本试,结果发现4.3还真调用了openFileChooser方法。

所以这应该就是谷歌留下的坑了。我当时就很气,认为谷歌为什么这么久都不解决这个问题。其实谷歌真解决了,在5.0之后用新的onShowFileChooser就是谷歌的解决方法,而且谷歌本身就希望用户用最新的几个版本。所以这个问题没法指望谷歌,自己想办法绕弯解决吧。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,468评论 5 473
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,620评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,427评论 0 334
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,160评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,197评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,334评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,775评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,444评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,628评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,459评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,508评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,210评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,767评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,850评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,076评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,627评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,196评论 2 341

推荐阅读更多精彩内容