圖檔上傳
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;
}