【Android】WebView的input上傳照片的相容問題

指間沙似流年發表於2017-12-23

問題

前幾天接到的一個需求，是關於第三方理財產品的H5上傳照片問題。對方說他們的新的需求，需要接入方配合上傳資產照片的需求，測試之後發現我們這邊的app端，IOS端上傳沒有問題，而Android端則點選沒有任何反應。對方H5呼叫的方式是通過<input type='file' accept='image/*'/>的方式呼叫，本來以為這個問題很簡單，就是app端沒有設定相機許可權，造成的點選無反應情況，而實際上加了之後發現，並非簡單的許可權問題。

解決問題

因為Android的版本碎片問題，很多版本的WebView都對喚起函式有不同的支援。我們需要重寫WebChromeClient下的openFileChooser()（5.0及以上系統回撥onShowFileChooser()）。我們通過Intent在openFileChooser()中喚起系統相機和支援Intent的相關app。在系統相機或者相關app中一頓操作之後，當返回app的時候，我們在onActivityResult()中將選擇好的圖片通過ValueCallback的onReceiveValue方法返回給WebView。

附上程式碼：

首先是重寫各個版本的WebChromeClient的支援

webView.setWebChromeClient(new WebChromeClient() {
  //For Android 3.0+
  public void openFileChooser(ValueCallback<Uri> uploadMsg) {
      selectImage();
      mUM = uploadMsg;
      Intent i = new Intent(Intent.ACTION_GET_CONTENT);
      i.addCategory(Intent.CATEGORY_OPENABLE);
      i.setType("*/*");
      MyBaseWebViewActivity.this.startActivityForResult(Intent.createChooser(i, "File Chooser"), FCR);
  }

  // For Android 3.0+, above method not supported in some android 3+ versions, in such case we use this
  public void openFileChooser(ValueCallback uploadMsg, String acceptType) {
      selectImage();
      mUM = uploadMsg;
      Intent i = new Intent(Intent.ACTION_GET_CONTENT);
      i.addCategory(Intent.CATEGORY_OPENABLE);
      i.setType("*/*");
      MyBaseWebViewActivity.this.startActivityForResult(
              Intent.createChooser(i, "File Browser"),
              FCR);
  }

  //For Android 4.1+
  public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType, String capture) {
      selectImage();
      mUM = uploadMsg;
      Intent i = new Intent(Intent.ACTION_GET_CONTENT);
      i.addCategory(Intent.CATEGORY_OPENABLE);
      i.setType("*/*");
      MyBaseWebViewActivity.this.startActivityForResult(Intent.createChooser(i, "File Chooser"), MyBaseWebViewActivity.FCR);
  }

  //For Android 5.0+
  public boolean onShowFileChooser(
          WebView webView, ValueCallback<Uri[]> filePathCallback,
          WebChromeClient.FileChooserParams fileChooserParams) {
      selectImage();
      if (mUMA != null) {
          mUMA.onReceiveValue(null);
      }
      mUMA = filePathCallback;
      Intent takePictureIntent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
      if (takePictureIntent.resolveActivity(MyBaseWebViewActivity.this.getPackageManager()) != null) {
          File photoFile = null;
          try {
              photoFile = createImageFile();
              takePictureIntent.putExtra("PhotoPath", mCM);
          } catch (IOException ex) {
              Log.e(TAG, "Image file creation failed", ex);
          }
          if (photoFile != null) {
              mCM = "file:" + photoFile.getAbsolutePath();
              filePath = photoFile.getAbsolutePath();
              takePictureIntent.putExtra(MediaStore.EXTRA_OUTPUT, Uri.fromFile(photoFile));
          } else {
              takePictureIntent = null;
          }
      }
      Intent contentSelectionIntent = new Intent(Intent.ACTION_GET_CONTENT);
      contentSelectionIntent.addCategory(Intent.CATEGORY_OPENABLE);
      contentSelectionIntent.setType("*/*");
      Intent[] intentArray;
      if (takePictureIntent != null) {
          intentArray = new Intent[]{takePictureIntent};
      } else {
          intentArray = new Intent[0];
      }

      Intent chooserIntent = new Intent(Intent.ACTION_CHOOSER);
      chooserIntent.putExtra(Intent.EXTRA_INTENT, contentSelectionIntent);
      chooserIntent.putExtra(Intent.EXTRA_TITLE, "Image Chooser");
      chooserIntent.putExtra(Intent.EXTRA_INITIAL_INTENTS, intentArray);
      startActivityForResult(chooserIntent, FCR);
      return true;
  }
});
複製程式碼

選完照片之後

/**
* 開啟相簿,同時處理圖片
*/
private void selectImage() {
   compressPath = Environment.getExternalStorageDirectory().getPath() + "/QWB/temp";
   File file = new File(compressPath);
   if (!file.exists()) {
       file.mkdirs();
   }
   compressPath = compressPath + File.separator + "compress.png";
   File image = new File(compressPath);
   if (image.exists()) {
       image.delete();
   }
}

// Create an image file
private File createImageFile() throws IOException {
   @SuppressLint("SimpleDateFormat") String timeStamp = DateUtils.nowTimeDetail();
   String imageFileName = "img_" + timeStamp + "_";
   File storageDir = Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_PICTURES);
   return File.createTempFile(imageFileName, ".jpg", storageDir);
}

private String mCM;
private String filePath = "";
private ValueCallback<Uri> mUM;
private ValueCallback<Uri[]> mUMA;
private final static int FCR = 1;
String compressPath = "";

@Override
protected void onActivityResult(int requestCode, int resultCode, Intent intent) {
   super.onActivityResult(requestCode, resultCode, intent);
   if (Build.VERSION.SDK_INT >= 21) {
       Uri[] results = null;
       //Check if response is positive
       if (resultCode == Activity.RESULT_OK) {
           if (requestCode == FCR) {
               if (null == mUMA) {
                   return;
               }
               if (intent == null) {
                   //Capture Photo if no image available
                   if (mCM != null) {
                       // results = new Uri[]{Uri.parse(mCM)};
                       results = new Uri[]{afterChosePic(filePath, compressPath)};
                   }
               } else {
                   String dataString = intent.getDataString();
                   if (dataString != null) {
                       results = new Uri[]{Uri.parse(dataString)};
                       LogUtil.d("tag", intent.toString());
//                            String realFilePath = getRealFilePath(Uri.parse(dataString));
//                            results = new Uri[]{afterChosePic(realFilePath, compressPath)};
                   }
               }
           }
       }
       mUMA.onReceiveValue(results);
       mUMA = null;
   } else {
       if (requestCode == FCR) {
           if (null == mUM) return;
           Uri result = intent == null || resultCode != RESULT_OK ? null : intent.getData();
           mUM.onReceiveValue(result);
           mUM = null;
       }
   }
}

/**
* 選擇照片後結束
*/
private Uri afterChosePic(String oldPath, String newPath) {
   File newFile;
   try {
       newFile = FileUtils.compressFile(oldPath, newPath);
   } catch (Exception e) {
       e.printStackTrace();
       newFile = null;
   }
   return Uri.fromFile(newFile);
}
複製程式碼

工具類

public class FileUtils {
    /**
     * 把圖片壓縮到200K
     *
     * @param oldpath
     *            壓縮前的圖片路徑
     * @param newPath
     *            壓縮後的圖片路徑
     * @return
     */
    public static File compressFile(String oldpath, String newPath) {
        Bitmap compressBitmap = FileUtils.decodeFile(oldpath);
        Bitmap newBitmap = ratingImage(oldpath, compressBitmap);
        ByteArrayOutputStream os = new ByteArrayOutputStream();
        newBitmap.compress(Bitmap.CompressFormat.PNG, 100, os);
        byte[] bytes = os.toByteArray();

        File file = null ;
        try {
            file = FileUtils.getFileFromBytes(bytes, newPath);
        } catch (Exception e) {
            e.printStackTrace();
        }finally{
            if(newBitmap != null ){
                if(!newBitmap.isRecycled()){
                    newBitmap.recycle();
                }
                newBitmap  = null;
            }
            if(compressBitmap != null ){
                if(!compressBitmap.isRecycled()){
                    compressBitmap.recycle();
                }
                compressBitmap  = null;
            }
        }
        return file;
    }

    private static Bitmap ratingImage(String filePath,Bitmap bitmap){
        int degree = readPictureDegree(filePath);
        return rotaingImageView(degree, bitmap);
    }

    /**
     *  旋轉圖片
     * @param angle
     * @param bitmap
     * @return Bitmap
     */
    public static Bitmap rotaingImageView(int angle , Bitmap bitmap) {
        //旋轉圖片 動作
        Matrix matrix = new Matrix();;
        matrix.postRotate(angle);
        System.out.println("angle2=" + angle);
        // 建立新的圖片
        Bitmap resizedBitmap = Bitmap.createBitmap(bitmap, 0, 0,
                bitmap.getWidth(), bitmap.getHeight(), matrix, true);
        return resizedBitmap;
    }

    /**
     * 讀取圖片屬性：旋轉的角度
     * @param path 圖片絕對路徑
     * @return degree旋轉的角度
     */
    public static int readPictureDegree(String path) {
        int degree  = 0;
        try {
            ExifInterface exifInterface = new ExifInterface(path);
            int orientation = exifInterface.getAttributeInt(ExifInterface.TAG_ORIENTATION, ExifInterface.ORIENTATION_NORMAL);
            switch (orientation) {
                case ExifInterface.ORIENTATION_ROTATE_90:
                    degree = 90;
                    break;
                case ExifInterface.ORIENTATION_ROTATE_180:
                    degree = 180;
                    break;
                case ExifInterface.ORIENTATION_ROTATE_270:
                    degree = 270;
                    break;
            }
        } catch (IOException e) {
            e.printStackTrace();
        }
        return degree;
    }

    /**
     * 把位元組陣列儲存為一個檔案
     *
     * @param b
     * @param outputFile
     * @return
     */
    public static File getFileFromBytes(byte[] b, String outputFile) {
        File ret = null;
        BufferedOutputStream stream = null;
        try {
            ret = new File(outputFile);
            FileOutputStream fstream = new FileOutputStream(ret);
            stream = new BufferedOutputStream(fstream);
            stream.write(b);
        } catch (Exception e) {
            // log.error("helper:get file from byte process error!");
            e.printStackTrace();
        } finally {
            if (stream != null) {
                try {
                    stream.close();
                } catch (IOException e) {
                    // log.error("helper:get file from byte process error!");
                    e.printStackTrace();
                }
            }
        }
        return ret;
    }

    /**
     * 圖片壓縮
     *
     * @param fPath
     * @return
     */
    public static Bitmap decodeFile(String fPath) {
        BitmapFactory.Options opts = new BitmapFactory.Options();
        opts.inJustDecodeBounds = true;
        opts.inDither = false; // Disable Dithering mode
        opts.inPurgeable = true; // Tell to gc that whether it needs free
        opts.inInputShareable = true; // Which kind of reference will be used to
        BitmapFactory.decodeFile(fPath, opts);
        final int REQUIRED_SIZE = 400;
        int scale = 1;
        if (opts.outHeight > REQUIRED_SIZE || opts.outWidth > REQUIRED_SIZE) {
            final int heightRatio = Math.round((float) opts.outHeight
                    / (float) REQUIRED_SIZE);
            final int widthRatio = Math.round((float) opts.outWidth
                    / (float) REQUIRED_SIZE);
            scale = heightRatio < widthRatio ? heightRatio : widthRatio;//
        }
        Log.i("scale", "scal ="+ scale);
        opts.inJustDecodeBounds = false;
        opts.inSampleSize = scale;
        Bitmap bm = BitmapFactory.decodeFile(fPath, opts).copy(Bitmap.Config.ARGB_8888, false);
        return bm;
    }



    /**
     * 建立目錄
     * @param path
     */
    public static void setMkdir(String path)
    {
        File file = new File(path);
        if(!file.exists())
        {
            file.mkdirs();
            Log.e("file", "目錄不存在  建立目錄    ");
        }else{
            Log.e("file", "目錄存在");
        }
    }

    /**
     * 獲取目錄名稱
     * @param url
     * @return FileName
     */
    public static String getFileName(String url)
    {
        int lastIndexStart = url.lastIndexOf("/");
        if(lastIndexStart!=-1)
        {
            return url.substring(lastIndexStart+1, url.length());
        }else{
            return null;
        }
    }

    /**
     * 刪除該目錄下的檔案
     *
     * @param path
     */
    public static void delFile(String path) {
        if (!TextUtils.isEmpty(path)) {
            File file = new File(path);
            if (file.exists()) {
                file.delete();
            }
        }
    }
}
複製程式碼

需要注意的問題
1. 在打release包的時候，因為混淆的問題，點選又會沒有反應，這是因為openFileChooser()是系統api，所以需要在混淆是不混淆該方法。
```
-keepclassmembers class * extends android.webkit.WebChromeClient{
public void openFileChooser(...);
}
複製程式碼
```
2. 當點選拍照之後，如果相機是橫屏拍照的話，當拍照結束之後跳回app的時候，會導致app端當前的webView頁面銷燬並重新開啟，需要在androidManifest.xml中當前Activity新增：
```
android:configChanges="orientation|keyboardHidden|screenSize"
複製程式碼
```

input file相容性問題
2018-03-27
Android WebView 常見的九個問題
2015-08-14
AndroidWebView
Android WebView 上傳檔案支援全解析
2015-12-23
AndroidWebView
Android中使用WebView遇到的問題總結：
2018-11-28
AndroidWebView
淺析：Android WebView 常見的九個問題
2015-08-13
AndroidWebView
webview 上 postUrl 傳送引數過程中資料丟失或錯誤的問題
2015-12-02
WebView
WebView上傳檔案的深坑與研究
2016-12-22
WebView
上傳App Store遇到的問題
2017-12-13
APP
input file圖片上傳
2018-04-24
Appium 的 ios 中 webview 問題
2020-11-24
APPiOSWebView
Android WebView適配html載入本地檔案並上傳
2021-09-09
AndroidWebViewHTML
HTML5的input:file上傳型別控制
2017-08-11
HTML型別
檔案上傳需要注意的問題
2014-05-09
input file美化 --上傳圖片
2017-04-19
android 4.4/5.1上使用aar的問題
2016-12-22
Android
有關laravel 上傳圖片訪問404的問題
2021-07-13
Laravel
曲線救國之修復騰訊 X5 核心檔案上傳的相容性問題
2018-09-11
HTML5的 input:file上傳以及型別控制
2018-11-24
HTML型別
input[type=file] 獲取上傳檔案的內容
2018-11-24
如何獲取<input type="file">上傳的檔名稱
2017-03-15
Android WebView的坑
2019-01-15
AndroidWebView
KindEditor編輯器的圖片上傳問題
2013-10-08
請教一個檔案上傳的問題
2003-04-12
關於檔案上傳的問題smartUpload
2007-08-20
input file上傳圖片預覽
2018-01-18
input file multiple 批量上傳檔案
2018-05-25
android中webView載入H5，JS不能呼叫問題的解決
2018-01-05
AndroidWebViewH5JS
React、Vue在IE的相容問題
2019-08-29
ReactVue
【轉】css解決相容的問題
2011-10-27
CSS
RichFaces editor的相容性問題
2009-08-03
input輸入框的游標定位的問題
2015-04-10
解決android有的手機拍照後上傳圖片被旋轉的問題
2014-07-11
Android
webView的使用及其亂碼問題的解決方案
2012-08-07
WebView
有關swoole+laravel 上傳檔案的問題
2021-07-09
Laravel
commons-fileupload-1.1.1.jar上傳的問題
2006-12-18
JAR
[文件教程]解決sae下文件縮圖上傳問題及外掛上傳問題
2019-05-11
input函式出現的問題(Python)
2013-10-17
函式Python
檢測input file檔案是否上傳
2017-09-09

【Android】WebView的input上傳照片的相容問題

問題

解決問題

相關文章