H5 通過(guò) input 標(biāo)簽，調(diào)起 Android 手機(jī)相冊(cè)，點(diǎn)擊取消時(shí)手機(jī)卡住

如題，其實(shí) H5 調(diào)起 Android 手機(jī)的相冊(cè)相機(jī)功能，最好是使用 JS 與 Android 進(jìn)行交互，因?yàn)檫@樣可調(diào)節(jié)性大一些，可定制型強(qiáng)很多。

但是，現(xiàn)實(shí)的情況的的確確是發(fā)生了，H5 就是用了 input 標(biāo)簽，這樣他能自動(dòng)調(diào)起 Android 端的相機(jī)和文件，就像這樣

點(diǎn)擊「上傳頭像」調(diào)起 Android 自帶的相冊(cè)和文件



但是，當(dāng)點(diǎn)擊取消的時(shí)候，如果不做任何處理，手機(jī)就會(huì)卡住，無(wú)法操作。

那么發(fā)生了怎么辦呢？只能找 百度、谷歌 “幫幫我了”唄

那你幫幫我吧

那么最終的結(jié)果是什么呢？

在取消的時(shí)候，也要將結(jié)果返回，否則會(huì)引起界面卡住

具體怎么操作呢？來(lái)看看吧

1、給webview 添加這樣的 WebChromeClient，并重寫 input 調(diào)起的方法
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 調(diào)用這個(gè)方法
 *
 * @param filePathCallback
 */
public void openFileChooser(final ValueCallback<Uri> filePathCallback) {
    mFilePathCallback = filePathCallback;
    take();
}

/**
 * 3.0 + 調(diào)用這個(gè)方法
 *
 * @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調(diào)用這個(gè)方法
 *
 * @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;
}

/**
 * 返回選擇相冊(cè)或者拍照的圖片
 */
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);
}
}

結(jié)合注釋，應(yīng)該能看懂吧。

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;

/**
 * 以下代碼是為了適應(yīng)H5調(diào)用本地圖片并且顯示在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) {
            /**
             * 如果返回的結(jié)構(gòu)為空，那么不從結(jié)果里面拿數(shù)據(jù)，而是直接從選擇圖片的路徑拿
             */
            results = new Uri[]{myFileWebChromeClient.imageUri};
        } else {
            /**
             * 如果返回了數(shù)據(jù)，則將返回的數(shù)據(jù)解析成 uri
             */
            String dataString = data.getDataString();
            ClipData clipData = data.getClipData();

            if (clipData != null) {
                /**
                 * 如果獲取的圖片經(jīng)過(guò)了裁剪
                 */
                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)
            /**
             * 沒(méi)有經(jīng)過(guò)裁剪，直接取得的圖片
             */
                results = new Uri[]{Uri.parse(dataString)};
        }
    }
    /**
     * 如果經(jīng)過(guò)了上面的處理，result 不為空，說(shuō)明用戶確實(shí)取得了圖片，那么將 result 返回即可
     *
     * 否則，返回空的圖片（圖片只有名字，并沒(méi)有真正的圖片）
     */
    if (results != null) {
        myFileWebChromeClient.mFilePathCallbacks.onReceiveValue(results);
        myFileWebChromeClient.mFilePathCallbacks = null;
    } else {
        results = new Uri[]{myFileWebChromeClient.imageUri};
        myFileWebChromeClient.mFilePathCallbacks.onReceiveValue(results);
        myFileWebChromeClient.mFilePathCallbacks = null;
    }
}
}

為了方便使用，搞了一個(gè)類，再 onActivityResult 中調(diào)用即可

這樣：

  @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、在點(diǎn)擊時(shí)，也要判斷下是否賦予了 拍照 和 讀寫 sd 卡的權(quán)限，這里就不貼代碼了

ok , 這樣就能解決點(diǎn)擊取消鍵，界面卡住的問(wèn)題了。

4、代碼提交到 github 了，用戶名 「guaju」，倉(cāng)庫(kù)名「AndroidCommonUtils」有需要看看吧
感謝各位朋友的支持，關(guān)注，轉(zhuǎn)發(fā)，持續(xù)更新，蟹蟹！
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 不知不覺(jué)，Hybird App已經(jīng)成了目前比較主流的一種開(kāi)發(fā)方式。 對(duì)于用戶體驗(yàn)要求較高或者與硬件交互較多的功能我...
    香辣牛肉面閱讀 10,609評(píng)論 3贊 89
  • 轉(zhuǎn)自 http://www.itdecent.cn/p/3ad7c39858ec 不知不覺(jué)，Hybird App已...
    龐哈哈哈12138閱讀 4,015評(píng)論 0贊 9
  • ￥開(kāi)啟￥ 【iAPP實(shí)現(xiàn)進(jìn)入界面執(zhí)行逐一顯】 〖2017-08-25 15:22:14〗 《//首先開(kāi)一個(gè)線程，因...
    小菜c閱讀 7,383評(píng)論 0贊 17
  • 關(guān)于 android Webview 基本使用 加載html四種方式 簡(jiǎn)單使用 在AndroidManifest....
    小面包屑閱讀 5,639評(píng)論 2贊 13
  • 在開(kāi)發(fā)中有時(shí)候會(huì)用到H5調(diào)用本地圖片或者相機(jī)，像第三方的實(shí)名認(rèn)證，在線客服等等都需要上傳圖片。H5中只需要通過(guò) 調(diào)...
    慕涵盛華閱讀 27,802評(píng)論 9贊 22

友情鏈接更多精彩內(nèi)容