天天看點

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<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 = ;//選取圖檔最大數量

        private int photosType = ;//圖庫類型


        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 >  ? selectImgMax : ;

            goToPhotos(selectImgMax);

            return true;

        }



        // For Android 3.0+

        public void openFileChooser(ValueCallback uploadMsg) {

            mUploadMessage = uploadMsg;

            selectImgMax = ;

            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 <= ) {//進入自定義圖庫

                i = new Intent(WebviewAct.this, MediaSelectActivity.class);

                i.putExtra("select_mode", );

                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 == ) {

                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 <= ) {//調用自定義圖庫

                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[];

            uris[] = intent == null || resultCode != RESULT_OK ? null

                    : intent.getData();

            if (uris[]!=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;

    }