全部產品
Search
文件中心

Mobile Platform as a Service:MPH5OpenFileChooserProvider 的使用

更新時間:Jul 26, 2024

使用情境

在 H5 離線包中使用 <input type="file"/> 選擇檔案或者圖片時,若不滿足需求,可以使用自訂圖片選擇功能。如選擇圖片樣式、可選多張圖片、動態許可權的處理等,推薦使用 MPH5OpenFileChooserProvider 來實現。

實現方式

  1. 在 mPaaS 初始化完成後的回調中註冊 MPH5OpenFileChooserProvider

    H5Utils.setProvider(MPH5OpenFileChooserProvider.class.getName(), 
                        new MPH5OpenFileChooserProvider() {
                            @Override
                            public boolean needIntercept(Activity activity, ValueCallback valueCallback, boolean b, APFileChooserParams apFileChooserParams) {
                                //不需要自訂圖片選擇功能時,不攔截 H5 容器,return false;預設不攔截 H5 容器
                                //需要自訂圖片選擇功能時,攔截 H5 容器,return true
                                return true;
                            }
    
                            @Override
                            public void openFileChooser(Activity activity, ValueCallback valueCallback, boolean b, APFileChooserParams apFileChooserParams) {
                                // 拿到合法的 uri 給到前端
                                //必須調用該方法,若不調用,下次單擊回調不執行
                                //1.通過intent開啟一個Activity,調用系統相簿或者拍照
                                //2.拿到選擇後的圖片
                                //3.關閉頁面通過valueCallback,傳遞給前端
                                valueCallback.onReceiveValue(xx);
                            }
                        });
    重要

    valueCallback.onReceiveValue(xx) 函數必須調用,若不調用,下次單擊回調不執行。

  2. 在回呼函數 openFileChooser 中選擇圖片進行處理。

    1. 通過 intent 開啟一個 Activity,調用系統相簿或者拍照。

    2. 擷取選擇後的圖片。

    3. 關閉開啟的 Activity,通過 valueCallback 傳遞圖片給前端。

參考方案

方案一

  1. openFileChooser 的回調方法中註冊廣播接收者。

  2. openFileChooser 方法中通過 Intent 跳轉到自己建立的 Activity

  3. 調用系統的拍照/圖片選擇 SDK(可以進行擴充如圖片裁剪等功能)。

  4. 通過圖片選擇 Activity 擷取到最終的選擇圖片, 發送廣播到 openFileChooser 回調的廣播監聽者,關閉 Activity 頁面。

  5. 通過 WebView 系統的 valueCallback.onReceiveValue(xx) 傳遞給前端。

方案二

  1. openFileChooser 方法中通過 Intent 跳轉到一個 Activity,並將 valueCallback 傳遞給 Activity

  2. 調用系統的拍照/圖片選擇 SDK(可以進行擴充如圖片裁剪等功能)。

  3. 通過 WebView 系統的 valueCallback.onReceiveValue(xx) 傳遞給前端 。

  4. 關閉 Activity 頁面 。