Android 内嵌WebView之选择文件上传及扩展

最新推荐文章于 2024-08-07 15:54:10 发布

一条苍老的小鱼

最新推荐文章于 2024-08-07 15:54:10 发布

阅读量3.3k

点赞数 2

分类专栏： Android 文章标签： android webview

本文链接：https://blog.csdn.net/sinat_33680954/article/details/53942687

版权

Android 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Android 内嵌WebView之选择文件上传及填坑记录

Android 内嵌WebView之选择文件上传及填坑记录
前言
实现
- 开发中遇到的问题
- 功能的具体实现
总结
扩展

前言

今天老大给我提了个醒，年前的一个问题还没解决…然而我早已忘记… 既然说了，那么咱就研究研究这问题。

问题是关于内嵌webView时网页内无法调用系统的拍照功能/文件选择功能。于是我写起一个demo试试，发现确实无法调起来，而浏览器上可以正常使用，恩…那就是我们支持的不够咯～

这不，发现带有input type = file标签的Html页面通过webVie显示就无法正常功能做，那么我们要做的是在webView中增加对这类js的支持…

实现

1.我们先写一个简单的demo，通过webView打开一个有调用打开文件功能的网页（文末附源码）

WebView mWeb = (WebView) findViewById(R.id.webView);
WebSettings settings = mWeb.getSettings();
mWeb.requestFocusFromTouch();
settings.setJavaScriptEnabled(true);   //支持js  
settings.setAllowFileAccess(true);     //设置可以访问文件

mWeb.loadUrl("file:///android_asset/getFile.html");

开发中遇到的问题

点击打开webView时跳转至系统自带的浏览器/第三方浏览器
解决办法：覆盖WebView的WebViewClient对象。

mWeb.setWebViewClient(new WebViewClient(){
public boolean shouldOverrideUrlLoading(WebView view, String url){ 
    view.loadUrl(url);
    return true;
    }
});
同时扩展一下：在不做任何处理下按系统返回键，整个Browser回调用finis()销毁，而一般我们是希望按历史记录逐步回退，那么这个时候我们需要在当前Activity中消费掉Back事件。

@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
    if (keyCode == KeyEvent.KEYCODE_BACK && mWeb.canGoBack()){
        mWeb.goBack();
        return true;
    }
    return super.onKeyDown(keyCode, event);
}

注：这里我们将Html文件放到assets目录下

功能的具体实现

通过Google大法终于找出常用的解决办法。

【重写WebVie的webChromeClien覆盖OpenFileChooser方法】

Android在不同版本中调用相机的方法不同：

Android 3.0 以下
public void openFileChooser(ValueCallback<Uri> uploadMsg)

Android 3.0以上
public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType)

Androi 4.4以下
public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType, String capture)

Android 5.0以上
public boolean onShowFileChooser(WebView mWebView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams)

代码如下：

mWeb.setWebChromeClient(new MyWebChromeClient());

 private class MyWebChromeClient extends WebChromeClient {

        //  Android 3.0 以下
        @SuppressWarnings("unused")
        public void openFileChooser(ValueCallback<Uri> uploadMsg) {
            openFileChooser(uploadMsg, null);
        }

        // Android 3.0以上
        public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType) {
            openFileChooser(uploadMsg, acceptType, null);
        }

        // Androi 4.4以下
        @SuppressWarnings("unused")
        public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType, String capture) {
            openFileInput(uploadMsg, null, false);
        }

        //  Android 5.0以上
        @SuppressWarnings("all")
        public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, WebChromeClient.FileChooserParams fileChooserParams) {
            if (Build.VERSION.SDK_INT >= 21) {
                final boolean allowMultiple = fileChooserParams.getMode() == WebChromeClient.FileChooserParams.MODE_OPEN_MULTIPLE;//是否支持多选
                openFileInput(null, filePathCallback, allowMultiple);
                return true;
            } else {
                return false;
            }
        }
    }

    @SuppressLint("NewApi")
    protected void openFileInput(final ValueCallback<Uri> fileUploadCallbackFirst, final ValueCallback<Uri[]> fileUploadCallbackSecond, final boolean allowMultiple) {
        //Android 5.0以下版本
        if (mFileUploadCallbackLowVersion != null) {
            mFileUploadCallbackLowVersion.onReceiveValue(null);
        }
        mFileUploadCallbackLowVersion = fileUploadCallbackFirst;

        //Android 5.0及以上版本
        if (mFileUploadCallbackHighVersion != null) {
            mFileUploadCallbackHighVersion.onReceiveValue(null);
        }
        mFileUploadCallbackHighVersion = fileUploadCallbackSecond;

        Intent i = new Intent(Intent.ACTION_GET_CONTENT);
        i.addCategory(Intent.CATEGORY_OPENABLE);

        if (allowMultiple) {
            if (Build.VERSION.SDK_INT >= 18) {
                i.putExtra(Intent.EXTRA_ALLOW_MULTIPLE, true);
            }
        }
        i.setType(mFileTypes);
        startActivityForResult(Intent.createChooser(i, "选择文件"), REQUEST_CODE_FILE_PICKER);
    }

最后我们在Acitivity的onActivityResult()方法中处理，不管请求是否成功，我们都要在onReceiveValue（）传nul，否则html中的j执行一次就不会再执行即我们点击不会在有响应了。


public void onActivityResult(final int requestCode, final int resultCode, final Intent intent) {
        if (requestCode == REQUEST_CODE_FILE_PICKER) {
            if (resultCode == Activity.RESULT_OK) {
                if (intent != null) {
                    //Android 5.0以下版本
                    if (mFileUploadCallbackLowVersion != null) {
                        mFileUploadCallbackLowVersion.onReceiveValue(intent.getData());
                        mFileUploadCallbackLowVersion = null;
                    } else if (mFileUploadCallbackHighVersion != null) {//Android 5.0及以上版本
                        Uri[] dataUris = null;

                        try {
                            if (intent.getDataString() != null) {
                                dataUris = new Uri[]{Uri.parse(intent.getDataString())};
                            } else {
                                if (Build.VERSION.SDK_INT >= 16) {
                                    if (intent.getClipData() != null) {
                                        final int numSelectedFiles = intent.getClipData().getItemCount();

                                        dataUris = new Uri[numSelectedFiles];

                                        for (int i = 0; i < numSelectedFiles; i++) {
                                            dataUris[i] = intent.getClipData().getItemAt(i).getUri();
                                        }
                                    }
                                }
                            }
                        } catch (Exception ignored) {
                        }
                        mFileUploadCallbackHighVersion.onReceiveValue(dataUris);
                        mFileUploadCallbackHighVersion = null;
                    }
                }
            } else {
                //这里mFileUploadCallbackFirst跟mFileUploadCallbackSecond在不同系统版本下分别持有了
                //WebView对象，在用户取消文件选择器的情况下，需给onReceiveValue传null返回值
                //否则WebView在未收到返回值的情况下，无法进行任何操作，文件选择器会失效
                if (mFileUploadCallbackLowVersion != null) {
                    mFileUploadCallbackLowVersion.onReceiveValue(null);
                    mFileUploadCallbackLowVersion = null;
                } else if (mFileUploadCallbackHighVersion != null) {
                    mFileUploadCallbackHighVersion.onReceiveValue(null);
                    mFileUploadCallbackHighVersion = null;
                }
            }
        }
    }

总结

Android及iOS的webview的引擎都是webkit，对H5提供支持。

webview有两个方法：setWebChromeClient 和setWebClientsetWebClient
WebChromeClient：辅助WebView处理Javascript的对话框，网站图标，网站title，加载进度等
WebViewClient就是帮助WebView处理各种通知、请求事件的。


WebSetting常用方法总结：

1.setJavaScriptEnabled(true); //支持js 

2.setPluginsEnabled(true); //支持插件 

3.setUseWideViewPort(false); //将图片调整到适合webview的大小 

4.setSupportZoom(true); //支持缩放 

5.setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN); //支持内容重新布

6.supportMultipleWindows(); //多窗口 

7.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK); //关闭webview中缓存 

8.setAllowFileAccess(true); //设置可以访问文件 

9.setNeedInitialFocus(true); //当webview调用requestFocus时为webview设置节点 webview

10. webSettings.setBuiltInZoomControls(true); //设置支持缩放 

11.setJavaScriptCanOpenWindowsAutomatically(true); //支持通过JS打开新窗口 

12.setLoadWithOverviewMode(true); // 缩放至屏幕的大小 

13.setLoadsImagesAutomatically(true); //支持自动加载图片

扩展

现在对于许多APP的开放方案已经从原生开发趋向于混合（Hybrid）开发的方式，我们应该去学习Java与JavaScript的交互；
React Native 结合了 Web 应用和 Native 应用的优势，可以使用 JavaScript 来开发 iOS 和 Android 原生应用。在 JavaScript 中用 React 抽象操作系统原生的 UI 组件，代替 DOM 元素来渲染等。
React Native 使你能够使用基于 JavaScript 和 React 一致的开发体验在本地平台上构建世界一流的应用程序体验。
我们都应该学习学习！