直接切入主题了
最近公司项目里线上用户反馈出一个bug,介入的第三方平台中有个添加图片的功能,当点击H5中的按钮的时候,调不起本地文件管理器,在很多手机上都出现这种情况
原因如下
刨除定制化的webview来说,原生webview是支持上传文件的。但是众多版本的迭代扩展,api参数也不一样。一般拿到上传文件的需求时,大家都会照搬android brower的代码(聪明),api如下:
// Android > 4.1.1 调用这个方法
public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType, String capture) {
LogUtils.d("openFileChooser 4.1.1 = ");
}
// 3.0 + 调用这个方法
public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType) {
LogUtils.d("openFileChooser 3.0 = ");
}
// Android < 3.0 调用这个方法
public void openFileChooser(ValueCallback<Uri> uploadMsg) {
LogUtils.d("openFileChooser < 3.0 = ");
}复制代码
之前项目里的代码当然也是这样写的,后来还怀疑过是否需要和前端联调,后来查了一下发现了第一个坑:
5.0之后,系统提供了onShowFileChooser来让我们实现选择文件的方法。
看了Sam的文章知道了这点:Sam
之后,本以为没有问题了,测试的时候发现,坑又来了。
我们可以看出,在这个功能上,有很明显的api升级痕迹,在试过众多手机之后,发现,4.4.0到4.4.2的系统无法调用这个api,当然也无从上传文件了,是怎么回事?
在这篇博客找到了详细的答案:穿衣助手技术博客
原来google在4.4更改webkit内核为chromium之后,把这个api删除了!一般升级api,都会保留对原有api的支持,@deprecated掉旧的api,加入新的api,但是google却2个都没做,开发团队解释,我们正在开发一个新的共有的api,这个api会更好,我们会在正式版本上推出。结果呢,在4.4.3版本,他又把这个api加回来了
于是怎么解决呢,网络上大多都放弃或是没有解决方案了,太过于麻烦,有这么三个方式:
参考这个,不过并没有给出具体的代码,只有思路,并且只有第三个思路是较靠谱的
第一种,H5直接使用新的video标签通过获取navigator的getUserMedia来获取视频流stream中截取一张图的方式来实现,不过这种方式在mobile上的支持比较晚。其中,android是从Android5.0才开始支持,ios未知。所以这种实现思路不做考虑。
第二种,H5直接用以前Html旧有的input标签来实现。其中这种方式在ios支持上还不错,在android上的支持则不怎么令人满意。因为它直接涉及到了webkit在android各个平台不同的实现方式,有很大的风险性。但是,出于方便让ios能直接调用的原因这个方式的可行性还是很大的。当然,问题并非不能解决,这个下面再讲。
第三种,H5直接利用js和本地进行交互来实现。这种方式的采用很成功的例子就是微信公众账号的实现,它通过实现一套js库来支持网页的各种调用
关于第三种方式的解决方案如下:
用js调用的本地方法如下:
final class ModuleJavaScriptInterface {
ModuleJavaScriptInterface() {
}
@JavascriptInterface
public void finishWebview(String json) {
if (!TextUtils.isEmpty(json)) {
Toast.makeText(BrowserActivity.this, "json= " + json, Toast.LENGTH_SHORT).show();
}
}
@JavascriptInterface
public void uploadImage() {
Toast.makeText(BrowserActivity.this, "upload ", Toast.LENGTH_SHORT).show();
//打开相册
Intent i = new Intent(Intent.ACTION_GET_CONTENT);
i.addCategory(Intent.CATEGORY_OPENABLE);
i.setType("*/*");
startActivityForResult(Intent.createChooser(i, "File Chooser"), KITKAT_RESULTCODE);
/*
在onActivityResult中 KITKAT_RESULTCODE
1 上传图片
2 上传成功后 将服务器返回的URL 返回给 js : UploadedFileName
String UploadedFileName = "";
mWebView.loadUrl("javascript:CheckImage('" + UploadedFileName + "')");
*/
}
}复制代码
当然还有一个小坑
之前项目里面已经处理好了,所以并没有显现出来,如下:
调用系统app选择文件的时候,若弹出选择框,cancel掉选择框之后,发现webview无响应了,无法刷新,加载,点击,甚至退出这个activity也无法加载!后果很严重~
原因是当你选择上传文件的时候,webview的ValueCallback对象(就是选择图片的回调)会持有这个webview,在没有收到回调之前,你无法对这个webview做任何的操作!
知道原因之后,就很好解决了,如果cancel了,那么直接调用该对象的onReceiveValue()方法,传入null即可,webview就可以正常操作了
最后别忘了取消混淆的问题呦
最后给出剩下的代码事例:
public class SafeWebViewClient extends WebViewClient {
@Override
public void onProgressChanged(WebView view, int newProgress) {
super.onProgressChanged(view, newProgress);
activity.mWebLoadingProgressBar.setProgress(newProgress);
if (newProgress >= 90 && activity.mWebLoadingProgressBar.getVisibility() == View.VISIBLE) {
activity.mWebLoadingProgressBar.setVisibility(View.GONE);
}
}
// For Android < 3.0
public void openFileChooser(ValueCallback<Uri> uploadMsg) {
activity.mUploadMessage = uploadMsg;
Intent i = new Intent(Intent.ACTION_GET_CONTENT);
i.addCategory(Intent.CATEGORY_OPENABLE);
i.setType("image/*");
activity.startActivityForResult(Intent.createChooser(i, "File Chooser"), activity.FILECHOOSER_RESULTCODE);
}
// For Android 3.0+
public void openFileChooser(ValueCallback uploadMsg, String acceptType) {
activity.mUploadMessage = uploadMsg;
Intent i = new Intent(Intent.ACTION_GET_CONTENT);
i.addCategory(Intent.CATEGORY_OPENABLE);
i.setType("*/*");
activity.startActivityForResult(Intent.createChooser(i, "File Browser"), activity.FILECHOOSER_RESULTCODE);
}
//For Android 4.1
public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType, String capture) {
activity.mUploadMessage = uploadMsg;
Intent i = new Intent(Intent.ACTION_GET_CONTENT);
i.addCategory(Intent.CATEGORY_OPENABLE);
i.setType("image/*");
activity.startActivityForResult(Intent.createChooser(i, "File Chooser"), activity.FILECHOOSER_RESULTCODE);
}
//For Android 5.0
@TargetApi(Build.VERSION_CODES.LOLLIPOP)
public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) {
// make sure there is no existing message
if (activity.uploadMessage != null) {
activity.uploadMessage.onReceiveValue(null);
activity.uploadMessage = null;
}
activity.uploadMessage = filePathCallback;
Intent intent = fileChooserParams.createIntent();
try {
activity.startActivityForResult(intent, activity.REQUEST_SELECT_FILE);
} catch (ActivityNotFoundException e) {
activity.uploadMessage = null;
return false;
}
return true;
}
}复制代码
选中图片之后走:
public void onActivityResult(int requestCode, int resultCode, Intent intent) {
if (requestCode == FILECHOOSER_RESULTCODE) {
if (null == mUploadMessage) return;
Uri result = intent == null || resultCode != RESULT_OK ? null : intent.getData();
mUploadMessage.onReceiveValue(result);
mUploadMessage = null;
} else if (requestCode == REQUEST_SELECT_FILE) {
if (uploadMessage == null) return;
uploadMessage.onReceiveValue(WebChromeClient.FileChooserParams.parseResult(resultCode, intent));
uploadMessage = null;
}复制代码
Thanks && END