移动端对html input标签文件选择支持

一、H5如何使用input标签

   H5使用 input标签做文件选择样例如下：

  <!--   1     -->
  <input type="file"  />
        
  <!--   2      -->
  <input type="file" accept="image/*" />
        
  <!--   3      -->
  <input type="file"  capture="camera"  accept="image/*" />

分别在iOS和android 自创建webview里面测试，结论如下：

（1）这三种方式在android上都没有反应

（2）第1个方式弹出选择框，有三项选择分别是拍照或视频、相册、浏览（会打开文件目录）。

        第2个方式在iOS任何系统，弹出选择框，有两项选择分别是拍照、相册

        第3个方式在iOS任何系统，直接打开相机。

二、android 如何支持

android需要自行实现，现在我们先介绍实现2、3两种。webview 自定义WebChromeClient的以下方法:

//API < 21(Android 5.0)回调此方法
public void openFileChooser(ValueCallback<Uri> uploadFile, String acceptType, String capture) {
            mUploadMessage = uploadFile;
            if (acceptType.equals("image/*")) {

                if (capture.equalsIgnoreCase("camera")){
                    SystemCamera camera = new SystemCamera(mActivity,AcMobileWebGapClass.this);
                    camera.inputAcceptImageCamera();
                    mCaptureUri =camera.getmUri();
                }else {
                    Intent intent = new Intent(mActivity.getApplicationContext(), PhotoActivity.class);
                    mActivity.startActivityForResult(intent, PhotoActivity.PHOTO_ACTIVITY_CODE);
                }

            }

        }

        //API >= 21(Android 5.0)回调此方法
        @Override
        public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) {

            if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP) {
                mUploadCallbackAboveL = filePathCallback;
                String[] acceptTypes = fileChooserParams.getAcceptTypes();
                boolean capture = fileChooserParams.isCaptureEnabled();

                if (acceptTypes.length > 0 && acceptTypes[0].equals("image/*")) {
                   if (capture){

                       SystemCamera camera = new SystemCamera(mActivity,AcMobileWebGapClass.this);
                       camera.inputAcceptImageCamera();
                       mCaptureUri =camera.getmUri();

                   }else {
                       Intent intent = new Intent(mActivity.getApplicationContext(), PhotoActivity.class);
                       mActivity.startActivityForResult(intent, PhotoActivity.PHOTO_ACTIVITY_CODE);
                   }
                    return true;
                }


            }
            return super.onShowFileChooser(webView, filePathCallback, fileChooserParams);

        }

第2方式就直接打开相机。 第3方式弹出选择框让用户选择拍照 或者 相册选择。

在activity处理结果

@Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);

            switch (requestCode){
                //<QRCodeCallback>
                case PhotoActivity.PHOTO_ACTIVITY_CODE:
                    if (data != null && resultCode == RESULT_OK){
                        Uri[] results = new Uri[]{ Uri.parse(data.getStringExtra("result"))};
                        if (mAcmobileWebview.mUploadCallbackAboveL != null){
                            mAcmobileWebview.mUploadCallbackAboveL.onReceiveValue(results);
                            mAcmobileWebview.mUploadCallbackAboveL= null;
                        }else if (mAcmobileWebview.mUploadMessage !=null){
                            mAcmobileWebview.mUploadMessage.onReceiveValue(Uri.parse(data.getStringExtra("result")));
                            mAcmobileWebview.mUploadMessage= null;
                        }

                    }else{
                        if (mAcmobileWebview.mUploadCallbackAboveL != null){
                            mAcmobileWebview.mUploadCallbackAboveL.onReceiveValue(null);
                            mAcmobileWebview.mUploadCallbackAboveL= null;
                        }else if (mAcmobileWebview.mUploadMessage !=null){
                            mAcmobileWebview.mUploadMessage.onReceiveValue(null);
                            mAcmobileWebview.mUploadMessage= null;
                        }

                    }
                    break;

                case 203:
                    if (resultCode == RESULT_OK && mAcmobileWebview.mCaptureUri != null) {
                        Uri[] results = new Uri[]{ mAcmobileWebview.mCaptureUri};
                        if (mAcmobileWebview.mUploadCallbackAboveL != null){
                            mAcmobileWebview.mUploadCallbackAboveL.onReceiveValue(results);
                            mAcmobileWebview.mUploadCallbackAboveL= null;
                        }else if (mAcmobileWebview.mUploadMessage !=null){
                            mAcmobileWebview.mUploadMessage.onReceiveValue(Uri.parse(data.getStringExtra("result")));
                            mAcmobileWebview.mUploadMessage= null;
                        }
                    }else {
                        if (mAcmobileWebview.mUploadCallbackAboveL != null){
                            mAcmobileWebview.mUploadCallbackAboveL.onReceiveValue(null);
                            mAcmobileWebview.mUploadCallbackAboveL= null;
                        }else if (mAcmobileWebview.mUploadMessage !=null){
                            mAcmobileWebview.mUploadMessage.onReceiveValue(null);
                            mAcmobileWebview.mUploadMessage= null;
                        }
                    }
                    break;
                default:
                    break;
            }

    }

第1方式可以打开手机文件管理目录，这个后续再写。