如題，其實 H5 調起 Android 手機的相冊相機功能，最好是使用 JS 與 Android 進行交互，因為這樣可調節性大一些，可定制型強很多。
但是，現實的情況的的確確是發生了，H5 就是用了 input 標簽，這樣他能自動調起 Android 端的相機和文件，就像這樣
點擊「上傳頭像」調起 Android 自帶的相冊和文件
但是，當點擊取消的時候，如果不做任何處理，手機就會卡住，無法操作。
那么發生了怎么辦呢？只能找 百度、谷歌 “幫幫我了”唄
那你幫幫我吧
那么最終的結果是什么呢？
在取消的時候，也要將結果返回，否則會引起界面卡住
具體怎么操作呢？來看看吧
1、給webview 添加這樣的 WebChromeClient，并重寫 input 調起的方法
public class MyFileWebChromeClient extends WebChromeClient {
public static final int REQUEST_FILE_PICKER = 1;
public ValueCallback<Uri> mFilePathCallback;
public ValueCallback<Uri[]> mFilePathCallbacks;
Activity mContext;
/**
* 記錄選擇圖片的 uri
*/
public Uri imageUri;
@Override
public void onReceivedTitle(WebView webView, String s) {
super.onReceivedTitle(webView, s);
}
public MyFileWebChromeClient(Activity mContext) {
super();
this.mContext = mContext;
}
/**
* Android < 3.0 調用這個方法
*
* @param filePathCallback
*/
public void openFileChooser(final ValueCallback<Uri> filePathCallback) {
mFilePathCallback = filePathCallback;
take();
}
/**
* 3.0 + 調用這個方法
*
* @param filePathCallback
* @param acceptType
*/
public void openFileChooser(final ValueCallback filePathCallback, final String acceptType) {
mFilePathCallback = filePathCallback;
take();
}
/**
* js上傳文件的<input type="file" name="avatar" id="avatar" />事件捕獲,也就在這里啦
* Android >4.1.1調用這個方法
*
* @param filePathCallback
* @param acceptType
* @param capture
*/
public void openFileChooser(final ValueCallback<Uri> filePathCallback, final String acceptType, final String capture) {
mFilePathCallback = filePathCallback;
take();
}
@Override
public boolean onShowFileChooser(final WebView webView, final ValueCallback<Uri[]> filePathCallback, final FileChooserParams fileChooserParams) {
mFilePathCallbacks = filePathCallback;
take();
return true;
}
/**
* 返回選擇相冊或者拍照的圖片
*/
private void take() {
File imageStorageDir = new File(Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_PICTURES), "MyApp");
// Create the storage directory if it does not exist
if (!imageStorageDir.exists()) {
imageStorageDir.mkdirs();
}
File file = new File(imageStorageDir + File.separator + "IMG_" + String.valueOf(System.currentTimeMillis()) + ".jpg");
imageUri = Uri.fromFile(file);
final List<Intent> cameraIntents = new ArrayList<Intent>();
final Intent captureIntent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
final PackageManager packageManager = mContext.getPackageManager();
final List<ResolveInfo> listCam = packageManager.queryIntentActivities(captureIntent, 0);
for (ResolveInfo res : listCam) {
final String packageName = res.activityInfo.packageName;
final Intent i = new Intent(captureIntent);
i.setComponent(new ComponentName(res.activityInfo.packageName, res.activityInfo.name));
i.setPackage(packageName);
i.putExtra(MediaStore.EXTRA_OUTPUT, imageUri);
cameraIntents.add(i);
}
Intent i = new Intent(Intent.ACTION_GET_CONTENT);
i.addCategory(Intent.CATEGORY_OPENABLE);
i.setType("image/*");
Intent chooserIntent = Intent.createChooser(i, "Image Chooser");
chooserIntent.putExtra(Intent.EXTRA_INITIAL_INTENTS, cameraIntents.toArray(new Parcelable[]{}));
mContext.startActivityForResult(chooserIntent, REQUEST_FILE_PICKER);
}
}
結合注釋，應該能看懂吧。
2、在 webview 所在的 activity 重寫 onActivityResult 方法
public class MyFileOnActivityResult {
private static MyFileOnActivityResult myFileOnActivityResult;
public MyFileOnActivityResult(MyFileWebChromeClient myFileWebChromeClient) {
this.myFileWebChromeClient = myFileWebChromeClient;
}
public static MyFileOnActivityResult getInstance(MyFileWebChromeClient myFileWebChromeClient) {
if (myFileOnActivityResult == null) {
myFileOnActivityResult = new MyFileOnActivityResult(myFileWebChromeClient);
}
return myFileOnActivityResult;
}
MyFileWebChromeClient myFileWebChromeClient;
/**
* 以下代碼是為了適應H5調用本地圖片并且顯示在h5上
*/
public void onActivityResult(int requestCode, int resultCode, Intent intent) {
if (requestCode == MyFileWebChromeClient.REQUEST_FILE_PICKER) {
if (null == myFileWebChromeClient.mFilePathCallback && null == myFileWebChromeClient.mFilePathCallbacks) {
return;
}
Uri result = ((intent == null || resultCode != RESULT_OK) ? null : intent.getData());
if (myFileWebChromeClient.mFilePathCallbacks != null) {
onActivityResultAboveL(requestCode, resultCode, intent);
} else if (myFileWebChromeClient.mFilePathCallback != null) {
myFileWebChromeClient.mFilePathCallback = null;
}
}
}
@SuppressWarnings("null")
@TargetApi(Build.VERSION_CODES.BASE)
private void onActivityResultAboveL(int requestCode, int resultCode, Intent data) {
if (requestCode != MyFileWebChromeClient.REQUEST_FILE_PICKER
|| myFileWebChromeClient.mFilePathCallbacks == null) {
return;
}
Uri[] results = null;
if (resultCode == Activity.RESULT_OK) {
if (data == null) {
/**
* 如果返回的結構為空，那么不從結果里面拿數據，而是直接從選擇圖片的路徑拿
*/
results = new Uri[]{myFileWebChromeClient.imageUri};
} else {
/**
* 如果返回了數據，則將返回的數據解析成 uri
*/
String dataString = data.getDataString();
ClipData clipData = data.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)};
}
}
/**
* 如果經過了上面的處理，result 不為空，說明用戶確實取得了圖片，那么將 result 返回即可
*
* 否則，返回空的圖片（圖片只有名字，并沒有真正的圖片）
*/
if (results != null) {
myFileWebChromeClient.mFilePathCallbacks.onReceiveValue(results);
myFileWebChromeClient.mFilePathCallbacks = null;
} else {
results = new Uri[]{myFileWebChromeClient.imageUri};
myFileWebChromeClient.mFilePathCallbacks.onReceiveValue(results);
myFileWebChromeClient.mFilePathCallbacks = null;
}
}
}
為了方便使用，搞了一個類，再 onActivityResult 中調用即可
這樣：
@Override
protected void onActivityResult(int requestCode, int resultCode, @Nullable Intent data) {
MyFileOnActivityResult instance = MyFileOnActivityResult.getInstance(myFileWebChromeClient);
instance.onActivityResult(requestCode, resultCode, data);
super.onActivityResult(requestCode, resultCode, data);
}
3、在點擊時，也要判斷下是否賦予了 拍照 和 讀寫 sd 卡的權限，這里就不貼代碼了
ok , 這樣就能解決點擊取消鍵，界面卡住的問題了。
4、代碼提交到 github 了，用戶名 「guaju」，倉庫名「AndroidCommonUtils」有需要看看吧
