Android WebView那些坑之上传文件示例
最近公司项目需要在WebView上调用手机系统相册来上传图片，开发过程中发现在很多机器上无法正常唤起系统相册来选择图片。
解决问题之前我们先来说说WebView上传文件的逻辑：当我们在Web页面上点击选择文件的控件(<inputtype="file">)时，会回调WebChromeClient下的openFileChooser()（5.0及以上系统回调onShowFileChooser()）。这个时候我们在openFileChooser方法中通过Intent打开系统相册或者支持该Intent的第三方应用来选择图片。likethis：
publicvoidopenFileChooser(ValueCallback<Uri>valueCallback,StringacceptType,Stringcapture){
uploadMessage=valueCallback;
openImageChooserActivity();
}
privatevoidopenImageChooserActivity(){
Intenti=newIntent(Intent.ACTION_GET_CONTENT);
i.addCategory(Intent.CATEGORY_OPENABLE);
i.setType("image/*");
startActivityForResult(Intent.createChooser(i,
"ImageChooser"),FILE_CHOOSER_RESULT_CODE);
}
最后我们在onActivityResult()中将选择的图片内容通过ValueCallback的onReceiveValue方法返回给WebView，然后通过js上传。代码如下：
@Override
protectedvoidonActivityResult(intrequestCode,intresultCode,Intentdata){
super.onActivityResult(requestCode,resultCode,data);
if(requestCode==FILE_CHOOSER_RESULT_CODE){
Uriresult=data==null||resultCode!=RESULT_OK?null:data.getData();
if(uploadMessage!=null){
uploadMessage.onReceiveValue(result);
uploadMessage=null;
}
}
}
PS:ValueCallbacks是WebView组件通过openFileChooser()或者onShowFileChooser()提供给我们的，它里面包含了一个或者一组Uri,然后我们在onActivityResult()里将Uri传给ValueCallbacks的onReceiveValue()方法，这样WebView就知道我们选择了什么文件。
webview.setWebChromeClient(newWebChromeClient(){
//ForAndroid<3.0
publicvoidopenFileChooser(ValueCallback<Uri>valueCallback){
***
}
//ForAndroid>=3.0
publicvoidopenFileChooser(ValueCallbackvalueCallback,StringacceptType){
***
}
//ForAndroid>=4.1
publicvoidopenFileChooser(ValueCallback<Uri>valueCallback,
StringacceptType,Stringcapture){
***
}
//ForAndroid>=5.0
@Override
publicbooleanonShowFileChooser(WebViewwebView,
ValueCallback<Uri[]>filePathCallback,
WebChromeClient.FileChooserParamsfileChooserParams){
***
returntrue;
}
});
到这里你可能要问了，说了这么多还是没解释为什么在很多机型上无法唤起系统相册或者第三方app来选择图片啊？！这是因为为了最求完美的Google攻城狮们对openFileChooser做了多次修改，在5.0上更是将回调方法该为了onShowFileChooser。所以为了解决这一问题，兼容各个版本，我们需要对openFileChooser()进行重载，同时针对5.0及以上系统提供onShowFileChooser()方法：
webview.setWebChromeClient(newWebChromeClient(){
//ForAndroid<3.0
publicvoidopenFileChooser(ValueCallback<Uri>valueCallback){
***
}
//ForAndroid>=3.0
publicvoidopenFileChooser(ValueCallbackvalueCallback,StringacceptType){
***
}
//ForAndroid>=4.1
publicvoidopenFileChooser(ValueCallback<Uri>valueCallback,
StringacceptType,Stringcapture){
***
}
//ForAndroid>=5.0
@Override
publicbooleanonShowFileChooser(WebViewwebView,
ValueCallback<Uri[]>filePathCallback,
WebChromeClient.FileChooserParamsfileChooserParams){
***
returntrue;
}
});
大家应该注意到onShowFileChooser()中的ValueCallback包含了一组Uri(Uri[]),所以针对5.0及以上系统，我们还需要对onActivityResult()做一点点处理。这里不做描述，最后我再贴上完整代码。
当处理完这些后你以为就万事大吉了？！当初我也这样天真，但当我们打好release包测试的时候却又发现没法选择图片了！！！真是坑了个爹啊！！！无奈去翻WebChromeClient的源码，发现openFileChooser()是系统API，我们的release包是开启了混淆的，所以在打包的时候混淆了openFileChooser()，这就导致无法回调openFileChooser()了。
/**
*Telltheclienttoopenafilechooser.
*@paramuploadFileAValueCallbacktosettheURIofthefiletoupload.
*onReceiveValuemustbecalledtowakeupthethread.a
*@paramacceptTypeThevalueofthe'accept'attributeoftheinputtag
*associatedwiththisfilepicker.
*@paramcaptureThevalueofthe'capture'attributeoftheinputtag
*associatedwiththisfilepicker.
*
*@deprecatedUse{@link#showFileChooser}instead.
*@hideThismethodwasnotpublishedinanySDKversion.
*/
@SystemApi
@Deprecated
publicvoidopenFileChooser(ValueCallback<Uri>uploadFile,StringacceptType,Stringcapture){
uploadFile.onReceiveValue(null);
}
解决方案也很简单，直接不混淆openFileChooser()就好了。
-keepclassmembersclass*extendsandroid.webkit.WebChromeClient{
publicvoidopenFileChooser(...);
}
支持关于上传文件的所有坑都填完了，最后附上完整源码：
publicclassMainActivityextendsAppCompatActivity{
privateValueCallback<Uri>uploadMessage;
privateValueCallback<Uri[]>uploadMessageAboveL;
privatefinalstaticintFILE_CHOOSER_RESULT_CODE=10000;
@Override
protectedvoidonCreate(BundlesavedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
WebViewwebview=(WebView)findViewById(R.id.web_view);
assertwebview!=null;
WebSettingssettings=webview.getSettings();
settings.setUseWideViewPort(true);
settings.setLoadWithOverviewMode(true);
settings.setJavaScriptEnabled(true);
webview.setWebChromeClient(newWebChromeClient(){
//ForAndroid<3.0
publicvoidopenFileChooser(ValueCallback<Uri>valueCallback){
uploadMessage=valueCallback;
openImageChooserActivity();
}
//ForAndroid>=3.0
publicvoidopenFileChooser(ValueCallbackvalueCallback,StringacceptType){
uploadMessage=valueCallback;
openImageChooserActivity();
}
//ForAndroid>=4.1
publicvoidopenFileChooser(ValueCallback<Uri>valueCallback,StringacceptType,Stringcapture){
uploadMessage=valueCallback;
openImageChooserActivity();
}
//ForAndroid>=5.0
@Override
publicbooleanonShowFileChooser(WebViewwebView,ValueCallback<Uri[]>filePathCallback,WebChromeClient.FileChooserParamsfileChooserParams){
uploadMessageAboveL=filePathCallback;
openImageChooserActivity();
returntrue;
}
});
StringtargetUrl="file:///android_asset/up.html";
webview.loadUrl(targetUrl);
}
privatevoidopenImageChooserActivity(){
Intenti=newIntent(Intent.ACTION_GET_CONTENT);
i.addCategory(Intent.CATEGORY_OPENABLE);
i.setType("image/*");
startActivityForResult(Intent.createChooser(i,"ImageChooser"),FILE_CHOOSER_RESULT_CODE);
}
@Override
protectedvoidonActivityResult(intrequestCode,intresultCode,Intentdata){
super.onActivityResult(requestCode,resultCode,data);
if(requestCode==FILE_CHOOSER_RESULT_CODE){
if(null==uploadMessage&&null==uploadMessageAboveL)return;
Uriresult=data==null||resultCode!=RESULT_OK?null:data.getData();
if(uploadMessageAboveL!=null){
onActivityResultAboveL(requestCode,resultCode,data);
}elseif(uploadMessage!=null){
uploadMessage.onReceiveValue(result);
uploadMessage=null;
}
}
}
@TargetApi(Build.VERSION_CODES.LOLLIPOP)
privatevoidonActivityResultAboveL(intrequestCode,intresultCode,Intentintent){
if(requestCode!=FILE_CHOOSER_RESULT_CODE||uploadMessageAboveL==null)
return;
Uri[]results=null;
if(resultCode==Activity.RESULT_OK){
if(intent!=null){
StringdataString=intent.getDataString();
ClipDataclipData=intent.getClipData();
if(clipData!=null){
results=newUri[clipData.getItemCount()];
for(inti=0;i<clipData.getItemCount();i++){
ClipData.Itemitem=clipData.getItemAt(i);
results[i]=item.getUri();
}
}
if(dataString!=null)
results=newUri[]{Uri.parse(dataString)};
}
}
uploadMessageAboveL.onReceiveValue(results);
uploadMessageAboveL=null;
}
}
源码地址:http://xiazai.jb51.net/201701/yuanma/WebViewSample_jb51.rar
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。