關於Android WebView上傳檔案的解決方案，androidwebview

關於Android WebView上傳檔案的解決方案，androidwebview

我們在開發需求的時候，難免會接入一下第三方的H5頁面，有些H5頁面是具有上傳照片的功能，Android 中的 WebView是不能直接開啟檔案選擇彈框的

接下來我講簡單提供一下解決方案，先說一下思路

1.接收WebView開啟檔案選取器的通知

2.收到通知後，開啟檔案選取器等待使用者選擇需要上傳的檔案

3.在onActivityResult中得到使用者選擇的檔案的Uri

4.然後把Uri傳遞給Html5

這樣就完成了一次H5選擇檔案的過程，下面我把代碼貼出來自習看一下

 

首先，WebView必須要支援JS互動，所以要開啟JS互動

mWebView.getSettings().setJavaScriptEnabled(true);

 

當H5在調用上傳檔案的Api的時候，WebView會回調 openFileChooser和onShowFileChooser 方法來通知我們，我們這個時候要做的就是重寫這個方法

需要注意的是這個方法在不同的Api上會回調不同行參方法

mWebView.setWebChromeClient(new WebChromeClient() {            @Override            public void onProgressChanged(WebView view, int newProgress) {                if (newProgress == 100) {                    mBar.setVisibility(View.GONE);                } else {                    mBar.setVisibility(View.VISIBLE);                    mBar.setProgress(newProgress);                }                super.onProgressChanged(view, newProgress);            }            //For Android API < 11 (3.0 OS)            public void openFileChooser(ValueCallback<Uri> valueCallback) {                uploadMessage = valueCallback;                openImageChooserActivity();            }            //For Android API >= 11 (3.0 OS)            public void openFileChooser(ValueCallback<Uri> valueCallback, String acceptType, String capture) {                uploadMessage = valueCallback;                openImageChooserActivity();            }            //For Android API >= 21 (5.0 OS)            @Override            public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, WebChromeClient.FileChooserParams fileChooserParams) {                uploadMessageAboveL = filePathCallback;                openImageChooserActivity();                return true;            }        });

 

我們在openFileChooser方法中先儲存了一下ValueCallback的回調對象，這個對象最後用來通知H5檔案地址，我們之後在調用openFileChooser方法來開啟檔案選取器

 private void openImageChooserActivity() {        Intent i = new Intent(Intent.ACTION_GET_CONTENT);        i.addCategory(Intent.CATEGORY_OPENABLE);        i.setType("image/*");        startActivityForResult(Intent.createChooser(i, "Image Chooser"), FILE_CHOOSER_RESULT_CODE);    }

 

當使用者選擇完檔案後，會調用onActivityResult方法，我們重寫並等待回調

@Override    protected void onActivityResult(int requestCode, int resultCode, Intent data) {        super.onActivityResult(requestCode, resultCode, data);        if (requestCode == FILE_CHOOSER_RESULT_CODE) {            if (null == uploadMessage && null == uploadMessageAboveL) return;            Uri result = data == null || resultCode != RESULT_OK ? null : data.getData();            if (uploadMessageAboveL != null) {                onActivityResultAboveL(requestCode, resultCode, data);            } else if (uploadMessage != null) {                uploadMessage.onReceiveValue(result);                uploadMessage = null;            }        }    }    @TargetApi(Build.VERSION_CODES.LOLLIPOP)    private void onActivityResultAboveL(int requestCode, int resultCode, Intent intent) {        if (requestCode != FILE_CHOOSER_RESULT_CODE || uploadMessageAboveL == null)            return;        Uri[] results = null;        if (resultCode == Activity.RESULT_OK) {            if (intent != null) {                String dataString = intent.getDataString();                ClipData clipData = intent.getClipData();                if (clipData != null) {                    results = new Uri[clipData.getItemCount()];                    for (int i = 0; i < clipData.getItemCount(); i++) {                        ClipData.Item item = clipData.getItemAt(i);                        results[i] = item.getUri();                    }                }                if (dataString != null)                    results = new Uri[]{Uri.parse(dataString)};            }        }        uploadMessageAboveL.onReceiveValue(results);        uploadMessageAboveL = null;    }

 

onActivityResult就是用來通知H5使用者選擇的檔案地址，在這個方法裡，用我們之前儲存的ValueCallback對象，調用onReceiveValue方法，H5就可以收到我們傳遞給它的地址資訊了！