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就是谷歌的解决方法,而且谷歌本身就希望用户用最新的几个版本。所以这个问题没法指望谷歌,自己想办法绕弯解决吧。

    原文作者:键盘上的麒麟臂
    原文地址: https://www.jianshu.com/p/bccdb259ae4c
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞