美文网首页Android开发技术干货
WebView支持<input type="fi

WebView支持<input type="fi

作者: SupLuo | 来源:发表于2016-07-29 17:32 被阅读261次

开发过程中我们可能遇到如下需求:

WebView加载一个网页,网页中包含一个从手机拍照或者从相册获取图片并上传的功能需求。

由于项目中实际只需要图片,因此在示例代码中是以交互图片为例。

一、原理

当触发web的<input>标签之后,会回调WebChromeClient的一个方法(不同Api Level方法签名不同),在这个方法中处理从相册或者拍照的请求,最后在Activity的onActivityResult方法中返回结果。

二、具体实现

1、实现WebChromeClient中的回调方法

在WebChromeClient增加如下方法(只给出了方法签名,具体实现逻辑,个人可以自行实现,无外乎就是请求相册或者照相之类的代码,后面会给出我的例子)

// Android < 3.0 调用这个方法

public void openFileChooser(ValueCallback uploadMsg) 

// 3.0 + 调用这个方法

public void openFileChooser(ValueCallback uploadMsg,String acceptType)

// Android > 4.1.1 调用这个方法

public void openFileChooser(ValueCallback uploadMsg,String acceptType,String capture)

// For Android 5.0+

public boolean onShowFileChooser(WebView webView,ValueCallback<Uri[]> filePathCallback,WebChromeClient.FileChooserParams fileChooserParams)

之所以有这么几个方法,是因为不同的android版本,调用的方法不同,这也属于webview的一个坑。

5.0之前的方法中有一个ValueCallback类型的参数,这个是关键,其他的参数可自行了解含义。

我们需要把这个参数保留起来,然后在上述方法中实现具体的业务逻辑,通常就是弹出一个对话框,让用户选择是拍照还是从相册获取图片。

a.拍照

/**

* 拍照获取图片

*/

Uri captureUri = null;

private void getPhotoByCamera() throws IOException {

captureUri=null;

File captureFile = createImageFile(this);//创建图片文件

captureUri= Uri.fromFile(captureFile);

Intent it =newIntent(MediaStore.ACTION_IMAGE_CAPTURE);

it.putExtra(MediaStore.EXTRA_OUTPUT,captureUri);

it.putExtra("PhotoPath",captureFile.getAbsolutePath());

startActivityForResult(it,REQUEST_CODE_FILE_CAPTURE);

}

跟大部分的拍照代码很类似,核心关键是保留文件的Uri参数,在最后返回给用户

b.从相册选择相片

/**

* 从相册获取图片

*/

private void getPhotoByAlbums() {

Intent intent =newIntent(Intent.ACTION_PICK);

intent.setDataAndType(MediaStore.Images.Media.EXTERNAL_CONTENT_URI,"image/*");

startActivityForResult(intent,REQUEST_CODE_FILE_CHOOSER);

}

二、处理onActivityResult方法 

protected void onActivityResult(int requestCode, int resultCode,Intent data) {

super.onActivityResult(requestCode,resultCode,data);

try{

if(requestCode == REQUEST_CODE_FILE_CHOOSER) {

if(null == mUploadMsg && null == mUploadMsgL) return;

Uri result = data ==null|| resultCode !=RESULT_OK?null: data.getData();

if(mUploadMsgL!=null) {

   onActivityResultAboveL(requestCode,resultCode,data);

}else if(mUploadMsg!=null) {

String imagePath = UriUtil.getPath(this,result);//获取文件路径

//4.4以后,从相册获取的图片的uri通常是以content://开始,需要转换成file://形式的uri

if(!TextUtils.isEmpty(imagePath)) {

result = Uri.parse("file:///"+ imagePath);

}

mUploadMsg.onReceiveValue(result);

mUploadMsg=null;

}

}else if(requestCode ==REQUEST_CODE_FILE_CAPTURE) {

if(null==mUploadMsg&&null==mUploadMsgL)return;

Uri result =captureUri==null|| resultCode !=RESULT_OK?null:captureUri;

if(mUploadMsgL!=null) {

onActivityResultAboveL(requestCode,resultCode,data);

}else{

mUploadMsg.onReceiveValue(result);

mUploadMsg=null;

}

}

}catch(Exception e) {

e.printStackTrace();

}

}

@TargetApi(Build.VERSION_CODES.LOLLIPOP)

private void onActivityResultAboveL(intrequestCode, intresultCode,Intent data) {

if(requestCode !=REQUEST_CODE_FILE_CHOOSER||mUploadMsgL==null) {

return;

}

Uri[] results =null;

if(resultCode == Activity.RESULT_OK) {

if(data !=null) {

String dataString = data.getDataString();

//

//ClipData clipData = data.getClipData();

//if(clipData !=null) {

//results =newUri[clipData.getItemCount()];

//for(inti =0;i < clipData.getItemCount();i++) {

//ClipData.Item item = clipData.getItemAt(i);

//results[i] = item.getUri();

//}

//}

if(!TextUtils.isEmpty(dataString))

results =newUri[]{Uri.parse(dataString)};

}else{

if(data ==null) {

// If there is not data, then we may have taken a photo

if(captureUri!=null) {

results =newUri[]{captureUri};

}

}

}

}

mUploadMsgL.onReceiveValue(results);

mUploadMsgL=null;

}

大写的注意:一旦web触发了WebChromeClient的方法传递过来了ValueCallback(5.0及以上是ValueCallback<Uri[]>)参数,那么最终一定要调用参数的onReceiveValue方法,即如果在流程处理中出现了异常或者用户取消了流程,则需要调用onReceiveValue(null),流程处理成功的时候传递相应数据即可。

直接贴代码了,有问题的后续可以直接联系我,QQ:862638161

相关文章

本文标题:WebView支持<input type="fi

本文链接:https://www.haomeiwen.com/subject/wrezjttx.html