Webview图片上传方法

作者: kingpengLin | 来源:发表于2016-05-15 22:37 被阅读6335次

    图片上传

    H5使用file标签进行文件上传,我们可以重写webview的webchromeClient中的openFileChooser方法,由于android系统有多个版本,因此需要重写多个openFileChooser进行兼容,而android5.0以后,需要重写onShowFileChooser方法,其上传的参数Uri变成了Uri[]类型,说明5.0以后支持多传图片。

        private class MyWebClient extends WebChromeClient {
    
    
            // For Android 5.0+
    
            @Override
    
            public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> valueCallback,
    
                                       android.webkit.WebChromeClient.FileChooserParams fileChooserParams) {
    
                    //打开图库
    
            }
    
    
            // For Android 3.0+
    
            public void openFileChooser(ValueCallback uploadMsg) {
    
                    //打开图库
    
            }
    
    
            //3.0--版本
    
            public void openFileChooser(ValueCallback uploadMsg, String acceptType) {
    
                openFileChooser(uploadMsg);
    
            }
    
    
            // For Android 4.1
    
            public void openFileChooser(ValueCallback uploadMsg, String acceptType,
    
                                        String capture) {
    
                openFileChooser(uploadMsg);
    
            }
    
        }
    
    然后在onActivityResult中处理返回的结果

    
        @Override
    
        protected void onActivityResult(int requestCode, int resultCode,
    
                                        Intent intent) {
    
            if (requestCode == FILECHOOSER_RESULTCODE) {
    
                //处理返回的图片,并进行上传
    
            }
    
        }
    
    需要注意的事,上传的给图片的路径必须是Uri格式,在实际测试中发现,大部分手机能识别file开头的uri,但有少部分手机,如魅族,vivo不识别该种uri格式,只识别content开头的uri,因此,需要做兼容处理,调用的系统图库,默认返回的uri为content开头,兼容较好,自定义图库则为file开头。

    具体代码如下:

            private ValueCallback<Uri> mUploadMessage;
    
            private ValueCallback<Uri[]> mValueCallback;
    
            private int selectImgMax = 1;//选取图片最大数量
    
            private int photosType = 0;//图库类型
    
    
            private class MyWebClient extends WebChromeClient {
    
    
            // For Android 5.0+
    
            @Override
    
            public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> valueCallback,
    
                                             android.webkit.WebChromeClient.FileChooserParams fileChooserParams) {
    
                mValueCallback = valueCallback;
    
                selectImgMax = selectImgMax > 1 ? selectImgMax : 1;
    
                goToPhotos(selectImgMax);
    
                return true;
    
            }
    
    
    
            // For Android 3.0+
    
            public void openFileChooser(ValueCallback uploadMsg) {
    
                mUploadMessage = uploadMsg;
    
                selectImgMax = 1;
    
                goToPhotos(selectImgMax);
    
            }
    
    
            //3.0--版本
    
            public void openFileChooser(ValueCallback uploadMsg, String acceptType) {
    
                openFileChooser(uploadMsg);
    
            }
    
    
            // For Android 4.1
    
            public void openFileChooser(ValueCallback uploadMsg, String acceptType,
    
                                        String capture) {
    
                openFileChooser(uploadMsg);
    
            }
    
    
            /**
    
             * 进入本地图库
    
             *
    
             * @param select_image_max //设置选取最大值
    
             */
    
            private void goToPhotos(int select_image_max) {
    
                Intent i;
    
                if (photosType <= 0) {//进入自定义图库
    
                    i = new Intent(WebviewAct.this, MediaSelectActivity.class);
    
                    i.putExtra("select_mode", 2);
    
                    i.putExtra("select_image_max", select_image_max);
    
                    WebviewAct.this.startActivityForResult(i, FILECHOOSER_RESULTCODE);
    
                } else {//进入系统图库
    
                    i = new Intent(Intent.ACTION_GET_CONTENT);
    
                    i.addCategory(Intent.CATEGORY_OPENABLE);
    
                    i.setType("image/*");
    
                    WebviewAct.this.startActivityForResult(Intent.createChooser(i, "File Chooser"), FILECHOOSER_RESULTCODE);
    
                }
    
            }
    
    
            @Override
    
            public void onProgressChanged(WebView view, int newProgress) {
    
                if (newProgress == 100) {
    
                    progressbar.setVisibility(View.GONE);
    
                } else {
    
                    if (progressbar.getVisibility() == View.GONE)
    
                        progressbar.setVisibility(View.VISIBLE);
    
                    progressbar.setProgress(newProgress);
    
                }
    
                super.onProgressChanged(view, newProgress);
    
            }
    
    
            @Override
    
            public void onReceivedTitle(WebView view, String title) {
    
                if (TextUtils.isEmpty(mytitle)) {
    
                    titleTextView.setText(title);
    
                }
    
                super.onReceivedTitle(view, title);
    
            }
    
        }
    
    
    
        @Override
    
        protected void onActivityResult(int requestCode, int resultCode,
    
                                        Intent intent) {
    
            if (requestCode == FILECHOOSER_RESULTCODE) {
    
                if (this.photosType <= 0) {//调用自定义图库
    
                    uploadImgFromMyPhotos();
    
                } else {//调用系统图库
    
                    uploadImgFromSysPhotos(resultCode, intent);
    
                }
    
            }
    
        }
    
    
        /**
    
         * 上传图片,调用系统图库 与h5 file标签交互
    
         *
    
         * @param resultCode
    
         * @param intent
    
         * @author linjinpeng 2015年11月30日 14:25:20
    
         */
    
        private void uploadImgFromSysPhotos(int resultCode, Intent intent) {
    
            if (mUploadMessage != null) {//5.0以下
    
                Uri result = intent == null || resultCode != RESULT_OK ? null
    
                        : intent.getData();
    
                mUploadMessage.onReceiveValue(result);
    
                mUploadMessage = null;
    
            } else if (mValueCallback != null) {//5.0+
    
                Uri[] uris = new Uri[1];
    
                uris[0] = intent == null || resultCode != RESULT_OK ? null
    
                        : intent.getData();
    
                if (uris[0]!=null){
    
                    mValueCallback.onReceiveValue(uris);
    
                }
    
                mValueCallback = null;
    
            }
    
        }
    
    
        /**
    
         * 上传图片,调用自己图库 与h5 file标签交互
    
         *
    
         * @author linjinpeng 2015年11月30日 12:22:23
    
         */
    
        private void uploadImgFromMyPhotos() {
    
            if (mValueCallback != null) {//5.0+
    
                Uri[] uris = MediaSelectHelper.getImgPathToUriArray();
    
                if (uris != null){
    
                    mValueCallback.onReceiveValue(uris);
    
                }
    
                mValueCallback = null;
    
            } else if (mUploadMessage != null) {//5.0及以下
    
                Uri uri = MediaSelectHelper.getImgPathToUri();
    
                mUploadMessage.onReceiveValue(uri);
    
                mUploadMessage = null;
    
            }
    
        }
    
    
        /**
    
         * js调用 setSelectImgMax 设置本地图片选取图片数量的最大值
    
         *
    
         * @param selectImgMax 默认值为1
    
         * @param photosType   type<=0?调用自己的图库:调用系统图库
    
         * @author linjinpeng 2015年11月30日 12:17:48
    
         */
    
        @JavascriptInterface
    
        public void setSelectImgMax(int selectImgMax, int photosType) {
    
            this.selectImgMax = selectImgMax;
    
            this.photosType = photosType;
    
        }
    

    相关文章

      网友评论

      • 56d6d22d2d9e:请问大神,webview上传图片,如果没有拍照或者选图依旧会上传,这个要怎么有没有什么好的解决办法
        kingpengLin:@灰鹰 你可以监听他的回调,然后判断Uri是否正常,在决定是否上传
      • Start将军:楼主你好,我想请教一下h5是怎么获取到文件数据并传给服务器端并保存的????目前h5同事不知道如何获取文件。感谢了
        kingpengLin:@Start将军 file标签 然后是js调用PHP上传图片
      • 潇湘夜雨123:楼主能不能发一下源码
      • huhu2008:4.4还是蛋疼
      • a2893163a814:请帮我调试通过运行起来后,继续 打赏支持! :smile:
      • a2893163a814:赞楼主!我是新手,复制了楼主的代码后,i = new Intent(WebviewAct.this, MediaSelectActivity.class);这里调试过不去,请帮忙,最好让我只改一个地方webview.loadUrl(URL);谢谢!!!
        kingpengLin: @e96f6220ecbe 这个需要你自己便利集合后将string 转成 URI
        潇湘夜雨123:我的自定义图库返回的是List<String> 如何转化成uri数组
        kingpengLin:这句代码是调用自己的图库 所以你要改成跳到你自定义图库或系统图库
      • RockerLau:楼主,请教下,vivo不识别该种uri格式,只识别content开头的uri,这种的不兼容的现象会有什么表现?

        会是返回前一页吗?因为我做的项目就存在这种情况
        kingpengLin:@Beyond_Xiang 选完照片,从图库返回当前页面的时候,照片无法上传,并不会造成闪退

      本文标题:Webview图片上传方法

      本文链接:https://www.haomeiwen.com/subject/vbzvrttx.html