直接切入主题了
最近公司项目里线上用户反馈出一个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
