WebView 上传文件 WebChromeClient之openFileChooser函数

原链接：http://blog.saymagic.cn/2015/11/08/webview-upload.html?utm_source=tuicool&utm_medium=referral

从零开始

我们在xml中写入一个简单的Webview组件：

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
2. xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
3. android:layout_height="match_parent"
4. tools:context=".MainActivity">
6. <WebView
7. android:id="@+id/webview"
8. android:layout_width="fill_parent"
9. android:layout_height="fill_parent"
10. android:layout_margin="5dp"></WebView>
12. </RelativeLayout>

然后在Java代码中使用其加载一个能够提供上传服务的URL：

1. WebView webview = (WebView) findViewById(R.id.webview);
2. webview.loadUrl(A_UPLOAD_URL);

之后，要加网络权限：

1. <uses-permission android:name="android.permission.INTERNET"></uses-permission>

如果想让Webview能够访问本地资源，SD卡的读写权限也是避免不了的：

1. <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/><uses-permission android:name="android.permission.MOUNT_UNMOUNT_FILESYSTEMS"/>

最后，我们运行，会发现根本不能访问本地资源。Why？

让我们来填补第一个坑：

支持上传文件

Webview执行上传操作的逻辑是这样的：首先准备上传时会回调WebChromeClient类下的openFileChooser方法，在这个方法中给我们机会发起Intent来打开支持提供文件的第三方应用，最后在onActivityResult回调中将第三方应用提供的内容通过一个叫做ValueCallback的参数返回给Webview（详细点来说：ValueCallback是在openFileChooser 方法里由webview提供给我们的，里面包裹一个Uri，我们在onActivityResult 里将选中的Uri反馈给ValueCallback，这时候相当于Webview就知道我们选择了什么文件），因此，我们需要为Webview设置一个提供openFileChooser方法的WebChromeClient，这个方法在不同版本的Android中参数是不同的，为此我们一般需要写三个重载函数，大致像这个样子：

1. private ValueCallback<Uri> mUploadMessage;
2. //设置`WebChromeClient`:
3. webview.setWebChromeClient(new WebChromeClient(){
4. public void openFileChooser(ValueCallback<Uri> uploadMsg) {
5. Log.d(TAG, "openFileChoose(ValueCallback<Uri> uploadMsg)");
6. mUploadMessage = uploadMsg;
7. Intent i = new Intent(Intent.ACTION_GET_CONTENT);
8. i.addCategory(Intent.CATEGORY_OPENABLE);
9. i.setType("*/*");
10. MainActivity.this.startActivityForResult(Intent.createChooser(i, "File Chooser"), FILECHOOSER_RESULTCODE);
11. }
13. public void openFileChooser( ValueCallback uploadMsg, String acceptType ) {
14. Log.d(TAG, "openFileChoose( ValueCallback uploadMsg, String acceptType )");
15. mUploadMessage = uploadMsg;
16. Intent i = new Intent(Intent.ACTION_GET_CONTENT);
17. i.addCategory(Intent.CATEGORY_OPENABLE);
18. i.setType("*/*");
19. MainActivity.this.startActivityForResult(
20. Intent.createChooser(i, "File Browser"),
21. FILECHOOSER_RESULTCODE);
22. }
23. public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType, String capture){
24. Log.d(TAG, "openFileChoose(ValueCallback<Uri> uploadMsg, String acceptType, String capture)");
25. mUploadMessage = uploadMsg;
26. Intent i = new Intent(Intent.ACTION_GET_CONTENT);
27. i.addCategory(Intent.CATEGORY_OPENABLE);
28. i.setType("*/*");
29. MainActivity.this.startActivityForResult( Intent.createChooser( i, "File Browser" ), MainActivity.FILECHOOSER_RESULTCODE );
30. }
31. });
33. //onActivityResult回调
34. @Override
35. protected void onActivityResult(int requestCode, int resultCode, Intent data) {
36. super.onActivityResult(requestCode, resultCode, data);
37. if(requestCode==FILECHOOSER_RESULTCODE)
38. {
39. if (null == mUploadMessage && null == mUploadCallbackAboveL) return;
40. Uri result = data == null || resultCode != RESULT_OK ? null : data.getData();
41. if (mUploadMessage != null) {
42. mUploadMessage.onReceiveValue(result);
43. mUploadMessage = null;
44. }
45. }
46. }

还有重要的一点：如果这个上传操作涉及到JS操作，别忘记对Webview开启对JS的支持：

1. WebSettings settings = webview.getSettings();
2. settings.setJavaScriptEnabled(true);

这样，打个debug包测试看以下，不出意外我们的Webview应该可以支持上传操作了。

别高兴得太早，如果这个时候产品要将release包推向市场，当你把release包交给产品时，你会发现你的Webview又不能上传了，什么情况？

请听Webview上传操作的第二个坑。

支持release版

debug版是好的，为什么release就不行了呢？准确的说，开启了混淆的release包是不可以的，究其原因在于,openFileChooser 方法并不是WebChromeClient 的对外开放的方法，因此这个方法会被混淆，解决办法也比较简单，只需要在混淆文件里控制一下即可：

1. -keepclassmembers class * extends android.webkit.WebChromeClient{
2. public void openFileChooser(...);
3. }

好了，我们的Webview可以作为应用内的一个部分对外发布了，等等，有5.0以上用户反映用不了？纳尼？？？？

别回心，来看看这第三个坑。

支持5.0

在5.0发布后，Android人家说了，这次我们回调的不是openFileChooser方法，而是onShowFileChooser方法，并且上文提到的ValueCallback参数里包裹着不再是Uri,而是Uri数组，因此我们必须为5.0+的机器做适配，大致思路如下：

1. webview.setWebChromeClient(new WebChromeClient(){
2. public void openFileChooser(ValueCallback<Uri> uploadMsg) {
3. ...
4. }
6. public void openFileChooser( ValueCallback uploadMsg, String acceptType ) {
7. ...
8. }
10. public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType, String capture){
11. ...
12. }
14. // For Android 5.0+
15. public boolean onShowFileChooser (WebView webView, ValueCallback<Uri[]> filePathCallback, WebChromeClient.FileChooserParams fileChooserParams) {
16. mUploadCallbackAboveL = filePathCallback;
17. Intent i = new Intent(Intent.ACTION_GET_CONTENT);
18. i.addCategory(Intent.CATEGORY_OPENABLE);
19. i.setType("*/*");
20. MainActivity.this.startActivityForResult(
21. Intent.createChooser(i, "File Browser"),
22. FILECHOOSER_RESULTCODE);
23. return true;
24. }
25. });
27. @Override
28. protected void onActivityResult(int requestCode, int resultCode, Intent data) {
29. super.onActivityResult(requestCode, resultCode, data);
30. if(requestCode==FILECHOOSER_RESULTCODE)
31. {
32. if (null == mUploadMessage && null == mUploadCallbackAboveL) return;
33. Uri result = data == null || resultCode != RESULT_OK ? null : data.getData();
34. if (mUploadCallbackAboveL != null) {
35. onActivityResultAboveL(requestCode, resultCode, data);
36. }
37. else if (mUploadMessage != null) {
38. mUploadMessage.onReceiveValue(result);
39. mUploadMessage = null;
40. }
41. }
42. }
44. @TargetApi(Build.VERSION_CODES.LOLLIPOP)
45. private void onActivityResultAboveL(int requestCode, int resultCode, Intent data) {
46. if (requestCode != FILECHOOSER_RESULTCODE
47. || mUploadCallbackAboveL == null) {
48. return;
49. }
51. Uri[] results = null;
52. if (resultCode == Activity.RESULT_OK) {
53. if (data == null) {
55. } else {
56. String dataString = data.getDataString();
57. ClipData clipData = data.getClipData();
59. if (clipData != null) {
60. results = new Uri[clipData.getItemCount()];
61. for (int i = 0; i < clipData.getItemCount(); i++) {
62. ClipData.Item item = clipData.getItemAt(i);
63. results[i] = item.getUri();
64. }
65. }
67. if (dataString != null)
68. results = new Uri[]{Uri.parse(dataString)};
69. }
70. }
71. mUploadCallbackAboveL.onReceiveValue(results);
72. mUploadCallbackAboveL = null;
73. return;
74. }

如上，我们的Webview应该就可以适应5.0+的机器了。