H5 通过 input 标签调起 Android 相册，点击取消时手机卡住 _Android

如题，其实 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;@Overridepublic 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();}@Overridepublic 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 =https://www.isolves.com/it/cxkf/ydd/html5/2019-10-22/= 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

H5 通过 input 标签调起 Android 相册，点击取消时手机卡住

推荐阅读

浅浅说科技|这次或要霸占市场！，差强人意还是搅局市场？红米K30再跌新低价

被告|冒充医生向老年人推销降糖假药四人被控诈骗210万元

「天蝎座」6月下旬，横财入宅，3大属相吉运相随，贵人驾临，财富延绵

孙权杀关羽嫁祸曹操?孙权为什么对关羽赶尽杀绝

驱动之家魅族旗舰机史上最大电池！魅族17半个小时能充入56%电量

结婚五年后，我重新思考了一下婚姻的意义

如何学习集合与函数的概念

『东方财富网』报54.4元，创科(00669)跌4.73%

2023两个立春时间 2023立春时间几点几分

电竞|LOL不是战士但出肉最恶心的4个英雄，选出来就是磨人心态的

冬天吃水果清热解毒去火注意事项冬天吃什么水果降火效果最好

中国游泳功勋教练徐国义病逝|中国游泳功勋教练徐国义病逝享年50岁

GPLP|蓝思科技回应投资人：前员工贪腐不会对生产经营造成重大不利影响

趣读文化|盗墓贼几乎洗劫一空，专家：只留下一个文物，千年古墓被发现

手机中国续航大提升，苹果明年新iPhone将使用增强版5nm芯片

高个子穿高跟鞋是啥感觉

周朝灭亡！周朝怎么灭亡的周朝是怎么灭的

安妮的大射手|但为了爱情，最疯狂的三个星座，义无反顾，不计后果，头脑理智

大盘|大盘反弹，不可忽视风险

集团|葵花药业：控股股东葵花集团解除质押3700万股