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

一、H5如何使用input标签

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

分别在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 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 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){                //                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方式可以打开手机文件管理目录，这个后续再写。

更多相关文章

随机推荐