Android WebView那些坑之上傳檔案
阿新 • • 發佈：2019-01-03
最近公司專案需要在WebView上呼叫手機系統相簿來上傳圖片，開發過程中發現在很多機器上無法正常喚起系統相簿來選擇圖片。
解決問題之前我們先來說說WebView上傳檔案的邏輯：當我們在Web頁面上點選選擇檔案的控制元件(<input type="file">)時，會回撥WebChromeClient下的openFileChooser()（5.0及以上系統回撥onShowFileChooser()）。這個時候我們在openFileChooser方法中通過Intent開啟系統相簿或者支援該Intent的第三方應用來選擇圖片。like this：
public void openFileChooser(ValueCallback<Uri> valueCallback, String acceptType, String capture) { uploadMessage = valueCallback; openImageChooserActivity(); } private void openImageChooserActivity() { Intent i = new Intent(Intent.ACTION_GET_CONTENT); i.addCategory(Intent.CATEGORY_OPENABLE); i.setType("image/*"); startActivityForResult(Intent.createChooser(i, "Image Chooser"), FILE_CHOOSER_RESULT_CODE); }
最後我們在onActivityResult()中將選擇的圖片內容通過ValueCallback的onReceiveValue方法返回給WebView，然後通過js上傳。程式碼如下：
@Override protected void onActivityResult(int requestCode, int resultCode, Intent data) { super.onActivityResult(requestCode, resultCode, data); if (requestCode == FILE_CHOOSER_RESULT_CODE) { Uri result = 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就知道我們選擇了什麼檔案。
到這裡你可能要問了，說了這麼多還是沒解釋為什麼在很多機型上無法喚起系統相簿或者第三方app來選擇圖片啊？！這是因為為了最求完美的Google攻城獅們對openFileChooser做了多次修改，在5.0上更是將回調方法該為了onShowFileChooser
openFileChooser()進行過載，同時針對5.0及以上系統提供onShowFileChooser()方法：
webview.setWebChromeClient(new WebChromeClient() {
// For Android < 3.0
public void openFileChooser(ValueCallback<Uri> valueCallback) {
***
}
// For Android >= 3.0
public void openFileChooser(ValueCallback valueCallback, String acceptType) {
***
}
//For Android >= 4.1
public void openFileChooser(ValueCallback<Uri> valueCallback,
String acceptType, String capture) {
***
}
// For Android >= 5.0
@Override
public boolean onShowFileChooser(WebView webView,
ValueCallback<Uri[]> filePathCallback,
WebChromeClient.FileChooserParams fileChooserParams) {
***
return true;
}
});
大家應該注意到onShowFileChooser()中的ValueCallback包含了一組Uri(Uri[]),所以針對5.0及以上系統，我們還需要對onActivityResult()做一點點處理。這裡不做描述，最後我再貼上完整程式碼。
當處理完這些後你以為就萬事大吉了？！當初我也這樣天真，但當我們打好release包測試的時候卻又發現沒法選擇圖片了！！！真是坑了個爹啊！！！無奈去翻WebChromeClient的原始碼，發現openFileChooser()是系統API，我們的release包是開啟了混淆的，所以在打包的時候混淆了openFileChooser()，這就導致無法回撥openFileChooser()了。
/**
* Tell the client to open a file chooser.
* @param uploadFile A ValueCallback to set the URI of the file to upload.
* onReceiveValue must be called to wake up the thread.a
* @param acceptType The value of the 'accept' attribute of the input tag
* associated with this file picker.
* @param capture The value of the 'capture' attribute of the input tag
* associated with this file picker.
*
* @deprecated Use {@link #showFileChooser} instead.
* @hide This method was not published in any SDK version.
*/
@SystemApi
@Deprecated
public void openFileChooser(ValueCallback<Uri> uploadFile, String acceptType, String capture) {
uploadFile.onReceiveValue(null);
}
解決方案也很簡單，直接不混淆openFileChooser()就好了。
-keepclassmembers class * extends android.webkit.WebChromeClient{
public void openFileChooser(...);
}
public class MainActivity extends AppCompatActivity {
private ValueCallback<Uri> uploadMessage;
private ValueCallback<Uri[]> uploadMessageAboveL;
private final static int FILE_CHOOSER_RESULT_CODE = 10000;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
WebView webview = (WebView) findViewById(R.id.web_view);
assert webview != null;
WebSettings settings = webview.getSettings();
settings.setUseWideViewPort(true);
settings.setLoadWithOverviewMode(true);
settings.setJavaScriptEnabled(true);
webview.setWebChromeClient(new WebChromeClient() {
// For Android < 3.0
public void openFileChooser(ValueCallback<Uri> valueCallback) {
uploadMessage = valueCallback;
openImageChooserActivity();
}
// For Android >= 3.0
public void openFileChooser(ValueCallback valueCallback, String acceptType) {
uploadMessage = valueCallback;
openImageChooserActivity();
}
//For Android >= 4.1
public void openFileChooser(ValueCallback<Uri> valueCallback, String acceptType, String capture) {
uploadMessage = valueCallback;
openImageChooserActivity();
}
// For Android >= 5.0
@Override
public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, WebChromeClient.FileChooserParams fileChooserParams) {
uploadMessageAboveL = filePathCallback;
openImageChooserActivity();
return true;
}
});
String targetUrl = "file:///android_asset/up.html";
webview.loadUrl(targetUrl);
}
private void openImageChooserActivity() {
Intent i = new Intent(Intent.ACTION_GET_CONTENT);
i.addCategory(Intent.CATEGORY_OPENABLE);
i.setType("image/*");
startActivityForResult(Intent.createChooser(i, "Image Chooser"), FILE_CHOOSER_RESULT_CODE);
}
@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
super.onActivityResult(requestCode, resultCode, data);
if (requestCode == FILE_CHOOSER_RESULT_CODE) {
if (null == uploadMessage && null == uploadMessageAboveL) return;
Uri result = data == null || resultCode != RESULT_OK ? null : data.getData();
if (uploadMessageAboveL != null) {
onActivityResultAboveL(requestCode, resultCode, data);
} else if (uploadMessage != null) {
uploadMessage.onReceiveValue(result);
uploadMessage = null;
}
}
}
@TargetApi(Build.VERSION_CODES.LOLLIPOP)
private void onActivityResultAboveL(int requestCode, int resultCode, Intent intent) {
if (requestCode != FILE_CHOOSER_RESULT_CODE || uploadMessageAboveL == null)
return;
Uri[] results = null;
if (resultCode == Activity.RESULT_OK) {
if (intent != null) {
String dataString = intent.getDataString();
ClipData clipData = intent.getClipData();
if (clipData != null) {
results = new Uri[clipData.getItemCount()];
for (int i = 0; i < clipData.getItemCount(); i++) {
ClipData.Item item = clipData.getItemAt(i);
results[i] = item.getUri();
}
}
if (dataString != null)
results = new Uri[]{Uri.parse(dataString)};
}
}
uploadMessageAboveL.onReceiveValue(results);
uploadMessageAboveL = null;
}
}