關(guān)于webview適配H5上傳照片或者視頻文件的方法
發(fā)布時(shí)間：2020-11-04 15:01:03 作者：楊武博 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了關(guān)于webview適配H5上傳照片或者視頻文件的方法,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
一、需要實(shí)現(xiàn)的功能：
用H5實(shí)現(xiàn)的App中需要在H5獲取手機(jī)中的照片或者視頻文件上傳到服務(wù)器。
二、分析實(shí)現(xiàn)方法：
由于不懂前端開發(fā)，不知道H5中有 input file之類的標(biāo)簽控件，可以用來選擇文件，剛開始的思路還是想著native 端是否要通過提供inputstream流方式，將文件內(nèi)容傳遞給JS。后來和前端溝通之后，H5在電腦端都是用input 設(shè)置type為 file 來實(shí)現(xiàn)文件選擇功能，于是才開始搜索資料，發(fā)現(xiàn)時(shí)需要在webview中設(shè)置 setWebChromeClient ，其中有對(duì)input 的響應(yīng)回調(diào):
三、具體實(shí)現(xiàn)：
前端代碼
<input type="file" accept="*/*" name="choose file"> <input type="file" accept="image/*" name="choose image"> <input type="file" accept="video/*" name="choose video"> <input type="file" accept="image/example" name="take photo and upload image"> <input type="file" accept="video/example" name="take video and upload video">
native端代碼：
@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
@Override
public boolean onShowFileChooser(WebView webView,
ValueCallback<Uri[]> filePathCallback,
WebChromeClient.FileChooserParams fileChooserParams) {
mFilePathCallbacks = filePathCallback;
// TODO: 根據(jù)標(biāo)簽中得接收類型，啟動(dòng)對(duì)應(yīng)的文件類型選擇器
String[] acceptTypes = fileChooserParams.getAcceptTypes();
for (String type : acceptTypes) {
Log.d(TAG, "acceptTypes=" + type);
}
// 針對(duì)拍照后馬上進(jìn)入上傳狀態(tài)處理
if ((acceptTypes.length > 0) && acceptTypes[0].equals("image/example")) {
Log.d(TAG, "onShowFileChooser takePhoto");
Intent it = CameraFunction.takePhoto(mContext);
startActivityForResult(it, TAKE_PHOTO_AND_UPLOAD_REQUEST);
return true;
}
// 針對(duì)錄像后馬上進(jìn)入上傳狀態(tài)處理
if ((acceptTypes.length > 0) && acceptTypes[0].equals("video/example")) {
Log.d(TAG, "onShowFileChooser record video");
Intent it = CameraFunction.recordVideo(mContext);
startActivityForResult(it, RECORD_VIDEO_AND_UPLOAD_REQUEST);
return true;
}
Intent intent = new Intent(Intent.ACTION_GET_CONTENT);
intent.addCategory(Intent.CATEGORY_OPENABLE);
if (acceptTypes.length > 0) {
if (acceptTypes[0].contains("image")) {
intent.setType("image/*");
} else if (acceptTypes[0].contains("video")) {
intent.setType("video/*");
} else {
intent.setType("*/*");
}
} else {
intent.setType("*/*");
}
WebViewActivity.this.startActivityForResult(Intent.createChooser(intent, "File Chooser"),
REQUEST_FILE_PICKER);
return true;
}
回調(diào)設(shè)置uri
/**
* 設(shè)置input 標(biāo)簽出發(fā)的回調(diào)選擇文件路徑，優(yōu)先使用path參數(shù)，
* 其次使用uri參數(shù)
* @param uriParam
* @param pathParam
*/
private void setFilePathCallback(Uri uriParam, String pathParam) {
//都為空，則設(shè)置null
if (uriParam == null && pathParam == null) {
if (mFilePathCallback != null) {
mFilePathCallback.onReceiveValue(null);
}
if (mFilePathCallbacks != null) {
mFilePathCallbacks.onReceiveValue(null);
}
} else if (null != pathParam) { // 優(yōu)先使用path
if (mFilePathCallback != null) {
Uri uri = Uri.fromFile(new File(pathParam));
mFilePathCallback.onReceiveValue(uri);
}
if (mFilePathCallbacks != null) {
Uri uri = Uri.fromFile(new File(pathParam));
mFilePathCallbacks.onReceiveValue(new Uri[] { uri });
}
} else if (null != uriParam) { //其次使用uri
if (mFilePathCallback != null) {
String path = UriUtils.getPath(getApplicationContext(), uriParam);
Uri uri = Uri.fromFile(new File(path));
mFilePathCallback.onReceiveValue(uri);
}
if (mFilePathCallbacks != null) {
String path = UriUtils.getPath(getApplicationContext(), uriParam);
Uri uri = Uri.fromFile(new File(path));
mFilePathCallbacks.onReceiveValue(new Uri[] { uri });
}
}
mFilePathCallback = null;
mFilePathCallbacks = null;
}
針對(duì)各個(gè)請(qǐng)求場(chǎng)景進(jìn)行處理：
public void onActivityResult(int requestCode, int resultCode, Intent intent) {
總結(jié)：既然用H5開發(fā)APP，就需要了解前端，不懂就要問了。查詢方向要對(duì)，否則南轅北轍，方向有時(shí)候比努力重要！
到此這篇關(guān)于關(guān)于webview適配H5上傳照片或者視頻文件的方法的文章就介紹到這了,更多相關(guān)webview適配H5上傳照片內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
app內(nèi)嵌H5 webview 本地緩存問題的解決
這篇文章主要介紹了app內(nèi)嵌H5 webview 本地緩存問題的解決,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一2020-10-19
Html5 webview元素定位工具的實(shí)現(xiàn)
這篇文章主要介紹了Html5 webview元素定位工具的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)2020-08-07
html5調(diào)用app分享功能示例（WebViewJavascriptBridge）
這篇文章主要介紹了html5調(diào)用app分享功能示例（WebViewJavascriptBridge）的相關(guān)資料,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-21
