WebView上传文件的深坑与研究

直接切入主题了

最近公司项目里线上用户反馈出一个bug，介入的第三方平台中有个添加图片的功能，当点击H5中的按钮的时候，调不起本地文件管理器，在很多手机上都出现这种情况

原因如下

刨除定制化的webview来说，原生webview是支持上传文件的。但是众多版本的迭代扩展，api参数也不一样。一般拿到上传文件的需求时，大家都会照搬android brower的代码（聪明），api如下：

        // Android > 4.1.1 调用这个方法
        public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType, String capture) {
            LogUtils.d("openFileChooser 4.1.1 = ");
        }

        // 3.0 + 调用这个方法
        public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType) {
            LogUtils.d("openFileChooser 3.0 = ");
        }

        // Android < 3.0 调用这个方法
        public void openFileChooser(ValueCallback<Uri> uploadMsg) {
            LogUtils.d("openFileChooser < 3.0 = ");
        }

之前项目里的代码当然也是这样写的，后来还怀疑过是否需要和前端联调，后来查了一下发现了第一个坑：

5.0之后，系统提供了onShowFileChooser来让我们实现选择文件的方法。

看了Sam的文章知道了这点：Sam

---

之后，本以为没有问题了，测试的时候发现，坑又来了。

我们可以看出，在这个功能上，有很明显的api升级痕迹，在试过众多手机之后，发现，4.4.0到4.4.2的系统无法调用这个api，当然也无从上传文件了，是怎么回事？

在这篇博客找到了详细的答案：穿衣助手技术博客

原来google在4.4更改webkit内核为chromium之后，把这个api删除了！一般升级api，都会保留对原有api的支持，@deprecated掉旧的api，加入新的api，但是google却2个都没做，开发团队解释，我们正在开发一个新的共有的api，这个api会更好，我们会在正式版本上推出。结果呢，在4.4.3版本，他又把这个api加回来了

于是怎么解决呢，网络上大多都放弃或是没有解决方案了，太过于麻烦，有这么三个方式：
参考这个，不过并没有给出具体的代码，只有思路，并且只有第三个思路是较靠谱的

• 第一种，H5直接使用新的video标签通过获取navigator的getUserMedia来获取视频流stream中截取一张图的方式来实现，不过这种方式在mobile上的支持比较晚。其中，android是从Android5.0才开始支持，ios未知。所以这种实现思路不做考虑。

• 第二种，H5直接用以前Html旧有的input标签来实现。其中这种方式在ios支持上还不错，在android上的支持则不怎么令人满意。因为它直接涉及到了webkit在android各个平台不同的实现方式，有很大的风险性。但是，出于方便让ios能直接调用的原因这个方式的可行性还是很大的。当然，问题并非不能解决，这个下面再讲。

• 第三种，H5直接利用js和本地进行交互来实现。这种方式的采用很成功的例子就是微信公众账号的实现，它通过实现一套js库来支持网页的各种调用

关于第三种方式的解决方案如下：

点我下载

用js调用的本地方法如下：

 final class ModuleJavaScriptInterface {

        ModuleJavaScriptInterface() {
        }

        @JavascriptInterface
        public void finishWebview(String json) {
            if (!TextUtils.isEmpty(json)) {
                Toast.makeText(BrowserActivity.this, "json= " + json, Toast.LENGTH_SHORT).show();
            }
        }

        @JavascriptInterface
        public void uploadImage() {
            Toast.makeText(BrowserActivity.this, "upload ", Toast.LENGTH_SHORT).show();


            //打开相册
            Intent i = new Intent(Intent.ACTION_GET_CONTENT);
            i.addCategory(Intent.CATEGORY_OPENABLE);
            i.setType("*/*");
            startActivityForResult(Intent.createChooser(i, "File Chooser"), KITKAT_RESULTCODE);

            /*
            在onActivityResult中  KITKAT_RESULTCODE

            1 上传图片
            2 上传成功后 将服务器返回的URL 返回给 js  : UploadedFileName


            String UploadedFileName = "";
            mWebView.loadUrl("javascript:CheckImage('" + UploadedFileName + "')");
             */

        }
    }

---

当然还有一个小坑

之前项目里面已经处理好了，所以并没有显现出来，如下：

调用系统app选择文件的时候，若弹出选择框，cancel掉选择框之后，发现webview无响应了，无法刷新，加载，点击，甚至退出这个activity也无法加载！后果很严重~
原因是当你选择上传文件的时候，webview的ValueCallback对象（就是选择图片的回调）会持有这个webview，在没有收到回调之前，你无法对这个webview做任何的操作！
知道原因之后，就很好解决了，如果cancel了，那么直接调用该对象的onReceiveValue()方法，传入null即可，webview就可以正常操作了

---

最后别忘了取消混淆的问题呦

---

最后给出剩下的代码事例：

public class SafeWebViewClient extends WebViewClient {  
    @Override  
    public void onProgressChanged(WebView view, int newProgress) {  
        super.onProgressChanged(view, newProgress);  
        activity.mWebLoadingProgressBar.setProgress(newProgress);  
        if (newProgress >= 90 && activity.mWebLoadingProgressBar.getVisibility() == View.VISIBLE) {  
            activity.mWebLoadingProgressBar.setVisibility(View.GONE);  
        }  
    }  
 
    // For Android < 3.0
    public void openFileChooser(ValueCallback<Uri> uploadMsg) {  
  
        activity.mUploadMessage = uploadMsg;  
        Intent i = new Intent(Intent.ACTION_GET_CONTENT);  
        i.addCategory(Intent.CATEGORY_OPENABLE);  
        i.setType("image/*");  
        activity.startActivityForResult(Intent.createChooser(i, "File Chooser"), activity.FILECHOOSER_RESULTCODE);  
  
    }  
  
    // For Android 3.0+  
    public void openFileChooser(ValueCallback uploadMsg, String acceptType) {  
        activity.mUploadMessage = uploadMsg;  
        Intent i = new Intent(Intent.ACTION_GET_CONTENT);  
        i.addCategory(Intent.CATEGORY_OPENABLE);  
        i.setType("*/*");  
        activity.startActivityForResult(Intent.createChooser(i, "File Browser"), activity.FILECHOOSER_RESULTCODE);  
    }  
  
    //For Android 4.1  
    public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType, String capture) {  
        activity.mUploadMessage = uploadMsg;  
        Intent i = new Intent(Intent.ACTION_GET_CONTENT);  
        i.addCategory(Intent.CATEGORY_OPENABLE);  
        i.setType("image/*");  
        activity.startActivityForResult(Intent.createChooser(i, "File Chooser"), activity.FILECHOOSER_RESULTCODE);  
  
    }  
  
    //For Android 5.0  
    @TargetApi(Build.VERSION_CODES.LOLLIPOP)  
    public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) {  
        // make sure there is no existing message  
        if (activity.uploadMessage != null) {  
            activity.uploadMessage.onReceiveValue(null);  
            activity.uploadMessage = null;  
        }  
        activity.uploadMessage = filePathCallback;  
        Intent intent = fileChooserParams.createIntent();  
        try {  
            activity.startActivityForResult(intent, activity.REQUEST_SELECT_FILE);  
        } catch (ActivityNotFoundException e) {  
            activity.uploadMessage = null;  
            return false;  
        }  
        return true;  
    }  
  
}  

选中图片之后走：

public void onActivityResult(int requestCode, int resultCode, Intent intent) {  
    if (requestCode == FILECHOOSER_RESULTCODE) {  
        if (null == mUploadMessage) return;  
        Uri result = intent == null || resultCode != RESULT_OK ? null : intent.getData();  
        mUploadMessage.onReceiveValue(result);  
        mUploadMessage = null;  
    } else if (requestCode == REQUEST_SELECT_FILE) {  
        if (uploadMessage == null) return;  
        uploadMessage.onReceiveValue(WebChromeClient.FileChooserParams.parseResult(resultCode, intent));  
        uploadMessage = null;  
    }  

Thanks && END