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+的機器了。