美文网首页Android开发技术干货
WebView支持<input type="fi

WebView支持<input type="fi

作者: SupLuo | 来源:发表于2016-07-29 17:32 被阅读261次

    开发过程中我们可能遇到如下需求:

    WebView加载一个网页,网页中包含一个从手机拍照或者从相册获取图片并上传的功能需求。

    由于项目中实际只需要图片,因此在示例代码中是以交互图片为例。

    一、原理

    当触发web的<input>标签之后,会回调WebChromeClient的一个方法(不同Api Level方法签名不同),在这个方法中处理从相册或者拍照的请求,最后在Activity的onActivityResult方法中返回结果。

    二、具体实现

    1、实现WebChromeClient中的回调方法

    在WebChromeClient增加如下方法(只给出了方法签名,具体实现逻辑,个人可以自行实现,无外乎就是请求相册或者照相之类的代码,后面会给出我的例子)

    // Android < 3.0 调用这个方法

    public void openFileChooser(ValueCallback uploadMsg) 

    // 3.0 + 调用这个方法

    public void openFileChooser(ValueCallback uploadMsg,String acceptType)

    // Android > 4.1.1 调用这个方法

    public void openFileChooser(ValueCallback uploadMsg,String acceptType,String capture)

    // For Android 5.0+

    public boolean onShowFileChooser(WebView webView,ValueCallback<Uri[]> filePathCallback,WebChromeClient.FileChooserParams fileChooserParams)

    之所以有这么几个方法,是因为不同的android版本,调用的方法不同,这也属于webview的一个坑。

    5.0之前的方法中有一个ValueCallback类型的参数,这个是关键,其他的参数可自行了解含义。

    我们需要把这个参数保留起来,然后在上述方法中实现具体的业务逻辑,通常就是弹出一个对话框,让用户选择是拍照还是从相册获取图片。

    a.拍照

    /**

    * 拍照获取图片

    */

    Uri captureUri = null;

    private void getPhotoByCamera() throws IOException {

    captureUri=null;

    File captureFile = createImageFile(this);//创建图片文件

    captureUri= Uri.fromFile(captureFile);

    Intent it =newIntent(MediaStore.ACTION_IMAGE_CAPTURE);

    it.putExtra(MediaStore.EXTRA_OUTPUT,captureUri);

    it.putExtra("PhotoPath",captureFile.getAbsolutePath());

    startActivityForResult(it,REQUEST_CODE_FILE_CAPTURE);

    }

    跟大部分的拍照代码很类似,核心关键是保留文件的Uri参数,在最后返回给用户

    b.从相册选择相片

    /**

    * 从相册获取图片

    */

    private void getPhotoByAlbums() {

    Intent intent =newIntent(Intent.ACTION_PICK);

    intent.setDataAndType(MediaStore.Images.Media.EXTERNAL_CONTENT_URI,"image/*");

    startActivityForResult(intent,REQUEST_CODE_FILE_CHOOSER);

    }

    二、处理onActivityResult方法 

    protected void onActivityResult(int requestCode, int resultCode,Intent data) {

    super.onActivityResult(requestCode,resultCode,data);

    try{

    if(requestCode == REQUEST_CODE_FILE_CHOOSER) {

    if(null == mUploadMsg && null == mUploadMsgL) return;

    Uri result = data ==null|| resultCode !=RESULT_OK?null: data.getData();

    if(mUploadMsgL!=null) {

       onActivityResultAboveL(requestCode,resultCode,data);

    }else if(mUploadMsg!=null) {

    String imagePath = UriUtil.getPath(this,result);//获取文件路径

    //4.4以后,从相册获取的图片的uri通常是以content://开始,需要转换成file://形式的uri

    if(!TextUtils.isEmpty(imagePath)) {

    result = Uri.parse("file:///"+ imagePath);

    }

    mUploadMsg.onReceiveValue(result);

    mUploadMsg=null;

    }

    }else if(requestCode ==REQUEST_CODE_FILE_CAPTURE) {

    if(null==mUploadMsg&&null==mUploadMsgL)return;

    Uri result =captureUri==null|| resultCode !=RESULT_OK?null:captureUri;

    if(mUploadMsgL!=null) {

    onActivityResultAboveL(requestCode,resultCode,data);

    }else{

    mUploadMsg.onReceiveValue(result);

    mUploadMsg=null;

    }

    }

    }catch(Exception e) {

    e.printStackTrace();

    }

    }

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)

    private void onActivityResultAboveL(intrequestCode, intresultCode,Intent data) {

    if(requestCode !=REQUEST_CODE_FILE_CHOOSER||mUploadMsgL==null) {

    return;

    }

    Uri[] results =null;

    if(resultCode == Activity.RESULT_OK) {

    if(data !=null) {

    String dataString = data.getDataString();

    //

    //ClipData clipData = data.getClipData();

    //if(clipData !=null) {

    //results =newUri[clipData.getItemCount()];

    //for(inti =0;i < clipData.getItemCount();i++) {

    //ClipData.Item item = clipData.getItemAt(i);

    //results[i] = item.getUri();

    //}

    //}

    if(!TextUtils.isEmpty(dataString))

    results =newUri[]{Uri.parse(dataString)};

    }else{

    if(data ==null) {

    // If there is not data, then we may have taken a photo

    if(captureUri!=null) {

    results =newUri[]{captureUri};

    }

    }

    }

    }

    mUploadMsgL.onReceiveValue(results);

    mUploadMsgL=null;

    }

    大写的注意:一旦web触发了WebChromeClient的方法传递过来了ValueCallback(5.0及以上是ValueCallback<Uri[]>)参数,那么最终一定要调用参数的onReceiveValue方法,即如果在流程处理中出现了异常或者用户取消了流程,则需要调用onReceiveValue(null),流程处理成功的时候传递相应数据即可。

    直接贴代码了,有问题的后续可以直接联系我,QQ:862638161

    相关文章

      网友评论

        本文标题:WebView支持<input type="fi

        本文链接:https://www.haomeiwen.com/subject/wrezjttx.html