Webview图片上传方法

• H5交互-图片上传

图片上传

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 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 mUploadMessage;

        private ValueCallback 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 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;

    }