WebView支持<input type="file">标签

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,015评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,262评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,727评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,986评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,363评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,610评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,871评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,582评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,297评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,551评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,053评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,385评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,035评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,079评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,841评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,648评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,550评论 2 270

推荐阅读更多精彩内容