Android WebView支持input file启用相机/选取照片功能

webview要调起input-file拍照或者选取文件功能,可以在webview.setWebChromeClient方法中重写指定的方法,来拦截webview的input事件,并做我们相应的操作。

Android代码

webView.setWebChromeClient(new WebChromeClient() {
      @Override
      public void onProgressChanged(WebView view, int newProgress) {
        if (newProgress == 100) {
          progressBar.setVisibility(View.GONE);//加载完网页进度条消失
        } else {
          progressBar.setProgress(newProgress);//设置进度值
          progressBar.setVisibility(View.VISIBLE);//开始加载网页时显示进度条
        }
      }

      /**
       * 8(Android 2.2) <= API <= 10(Android 2.3)回调此方法
       */
      private void openFileChooser(android.webkit.ValueCallback<Uri> uploadMsg) {
        Log.e("WangJ", "运行方法 openFileChooser-1");
        // (2)该方法回调时说明版本API < 21,此时将结果赋值给 mUploadCallbackBelow,使之 != null
        mUploadCallbackBelow = uploadMsg;
        takePhoto();
      }

      /**
       * 11(Android 3.0) <= API <= 15(Android 4.0.3)回调此方法
       */
      public void openFileChooser(android.webkit.ValueCallback<Uri> uploadMsg, String acceptType) {
        Log.e("WangJ", "运行方法 openFileChooser-2 (acceptType: " + acceptType + ")");
        // 这里我们就不区分input的参数了,直接用拍照
        openFileChooser(uploadMsg);
      }

      /**
       * 16(Android 4.1.2) <= API <= 20(Android 4.4W.2)回调此方法
       */
      public void openFileChooser(android.webkit.ValueCallback<Uri> uploadMsg, String acceptType, String capture) {
        Log.e("WangJ", "运行方法 openFileChooser-3 (acceptType: " + acceptType + "; capture: " + capture + ")");
        // 这里我们就不区分input的参数了,直接用拍照
        openFileChooser(uploadMsg);
      }

      /**
       * API >= 21(Android 5.0.1)回调此方法
       */
      @Override
      public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> valueCallback, FileChooserParams fileChooserParams) {
        Log.e("WangJ", "运行方法 onShowFileChooser");
        // (1)该方法回调时说明版本API >= 21,此时将结果赋值给 mUploadCallbackAboveL,使之 != null
        mUploadCallbackAboveL = valueCallback;
        takePhoto();
        return true;
      }
    });

这里的java代码是来拦截input事件的,里面做了很多api版本的判断,不同版本的api调用不同的方法,下面是一些其他方法:

调起相机/选择文件的方法:takePhoto();

 /**
   * 调用相机
   */
  private void takePhoto() {
    // 指定拍照存储位置的方式调起相机
    String filePath = Environment.getExternalStorageDirectory() + File.separator
        + Environment.DIRECTORY_PICTURES + File.separator;
    String fileName = "IMG_" + DateFormat.format("yyyyMMdd_hhmmss", Calendar.getInstance(Locale.CHINA)) + ".jpg";
    imageUri = Uri.fromFile(new File(filePath + fileName));

//    Intent intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
//    intent.putExtra(MediaStore.EXTRA_OUTPUT, imageUri);
//    startActivityForResult(intent, REQUEST_CODE);

    // 选择图片(不包括相机拍照),则不用成功后发刷新图库的广播
//    Intent i = new Intent(Intent.ACTION_GET_CONTENT);
//    i.addCategory(Intent.CATEGORY_OPENABLE);
//    i.setType("image/*");
//    startActivityForResult(Intent.createChooser(i, "Image Chooser"), REQUEST_CODE);

    Intent captureIntent = new Intent(android.provider.MediaStore.ACTION_IMAGE_CAPTURE);
    captureIntent.putExtra(MediaStore.EXTRA_OUTPUT, imageUri);

    Intent Photo = new Intent(Intent.ACTION_PICK,
        android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI);

    Intent chooserIntent = Intent.createChooser(Photo, "Image Chooser");
    chooserIntent.putExtra(Intent.EXTRA_INITIAL_INTENTS, new Parcelable[]{captureIntent});

    startActivityForResult(chooserIntent, REQUEST_CODE);
  }
onActivityResult回调:
@Override
  protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    super.onActivityResult(requestCode, resultCode, data);
    if (requestCode == REQUEST_CODE) {
      // 经过上边(1)、(2)两个赋值操作,此处即可根据其值是否为空来决定采用哪种处理方法
      if (mUploadCallbackBelow != null) {
        chooseBelow(resultCode, data);
      } else if (mUploadCallbackAboveL != null) {
        chooseAbove(resultCode, data);
      } else {
        Toast.makeText(this, "发生错误", Toast.LENGTH_SHORT).show();
      }
    }
  }

其他一些方法:

/**
   * Android API < 21(Android 5.0)版本的回调处理
   * @param resultCode 选取文件或拍照的返回码
   * @param data 选取文件或拍照的返回结果
   */
  private void chooseBelow(int resultCode, Intent data) {
    Log.e("WangJ", "返回调用方法--chooseBelow");

    if (RESULT_OK == resultCode) {
      updatePhotos();

      if (data != null) {
        // 这里是针对文件路径处理
        Uri uri = data.getData();
        if (uri != null) {
          Log.e("WangJ", "系统返回URI:" + uri.toString());
          mUploadCallbackBelow.onReceiveValue(uri);
        } else {
          mUploadCallbackBelow.onReceiveValue(null);
        }
      } else {
        // 以指定图像存储路径的方式调起相机,成功后返回data为空
        Log.e("WangJ", "自定义结果:" + imageUri.toString());
        mUploadCallbackBelow.onReceiveValue(imageUri);
      }
    } else {
      mUploadCallbackBelow.onReceiveValue(null);
    }
    mUploadCallbackBelow = null;
  }

  /**
   * Android API >= 21(Android 5.0) 版本的回调处理
   * @param resultCode 选取文件或拍照的返回码
   * @param data 选取文件或拍照的返回结果
   */
  private void chooseAbove(int resultCode, Intent data) {
    Log.e("WangJ", "返回调用方法--chooseAbove");

    if (RESULT_OK == resultCode) {
      updatePhotos();

      if (data != null) {
        // 这里是针对从文件中选图片的处理
        Uri[] results;
        Uri uriData = data.getData();
        if (uriData != null) {
          results = new Uri[]{uriData};
          for (Uri uri : results) {
            Log.e("WangJ", "系统返回URI:" + uri.toString());
          }
          mUploadCallbackAboveL.onReceiveValue(results);
        } else {
          mUploadCallbackAboveL.onReceiveValue(null);
        }
      } else {
        Log.e("WangJ", "自定义结果:" + imageUri.toString());
        mUploadCallbackAboveL.onReceiveValue(new Uri[]{imageUri});
      }
    } else {
      mUploadCallbackAboveL.onReceiveValue(null);
    }
    mUploadCallbackAboveL = null;
  }

  private void updatePhotos() {
    // 该广播即使多发(即选取照片成功时也发送)也没有关系,只是唤醒系统刷新媒体文件
    Intent intent = new Intent(Intent.ACTION_MEDIA_SCANNER_SCAN_FILE);
    intent.setData(imageUri);
    sendBroadcast(intent);
  }

相关的全局变量:

private android.webkit.ValueCallback<Uri[]> mUploadCallbackAboveL;
private android.webkit.ValueCallback<Uri> mUploadCallbackBelow;
private Uri imageUri;
private int REQUEST_CODE = 1234;

总结

以上所述是小编给大家介绍的Android WebView支持input file启用相机/选取照片功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

(0)

相关推荐

  • Android编程使用WebView实现文件下载功能的两种方法

    本文实例讲述了Android编程使用WebView实现文件下载功能的两种方法.分享给大家供大家参考,具体如下: 在应用中,通常会使用到文件下载功能,一般我们都是写一个下载操作工具类,在异步任务中执行下载功能. 今天我们来看下如何使用WebView的文件下载功能! 方法1,自定义下载操作 1. 先来布局 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools=&qu

  • WebView的介绍与简单实现Android和H5互调的方法

    为什么要学习Android与H5互调? 微信,QQ空间等大量软件都内嵌了H5,不得不说是一种趋势.Android与H5互调可以让我们的实现混合开发,至于混合开发就是在一个App中内嵌一个轻量级的浏览器,一部分原生的功能改为Html 5来开发. 优势:使用H5实现的功能能够在不升级App的情况下动态更新,而且可以在Android或iOS的App上同时运行,节约了成本,提高了开发效率. 原理:其实就是Java代码和JavaScript之间的调用. 开局插入一张文章的目录结构: WebView简介 要

  • input type=file 选择图片并且实现预览效果的实例

    通过<input />标签,给它指定type类型为file,可提供文件上传: accept:可选择上传类型,如:只要传图片,且不限制图片格式,为image/*: multiple:规定是否可以选择多个文件: 规定只可上传图片,且可以选择多个文件 <input type="file" accept="image/*" multiple="multiple"/> 当然,直接一个input type=file 只能选择上传的文件

  • input file样式修改以及图片预览删除功能详细概括(推荐)

    本篇对input file进行了修改,改成自己需要的样式,类似验证身份上传身份证图片的功能. 效果图如下: 这里主要展示上传预览图片功能,对于删除功能的html及css写的比较粗糙,对于想要精细表现这块儿的可以在自己添加修改. <!--点击预览图片--> <div class="picDiv"> <div class="addImages"> <!--multiple属性可选择多个图片上传--> <input t

  • Android WebView 不支持 H5 input type="file" 解决方法

    最近因为赶项目进度,因此将本来要用原生控件实现的界面,自己做了H5并嵌入webview中.发现点击H5中 input type="file" 标签 不能打开android资源管理器. 通过网络搜索发现是因为 android webview 由于考虑安全原因屏蔽了 input type="file" 这个功能 . 经过不懈的努力,以及google 翻译的帮助 在 stackoverflow 中找到了解决的方法. 具体可以理解为 重写webview 的WebChrome

  • Android WebView支持input file启用相机/选取照片功能

    webview要调起input-file拍照或者选取文件功能,可以在webview.setWebChromeClient方法中重写指定的方法,来拦截webview的input事件,并做我们相应的操作. Android代码 webView.setWebChromeClient(new WebChromeClient() { @Override public void onProgressChanged(WebView view, int newProgress) { if (newProgress

  • 详解Android WebView的input上传照片的兼容问题

    问题 前几天接到的一个需求,是关于第三方理财产品的H5上传照片问题. 对方说他们的新的需求,需要接入方配合上传资产照片的需求,测试之后发现我们这边的app端,IOS端上传没有问题,而Android端则点击没有任何反应. 对方H5调用的方式是通过<input type='file' accept='image/*'/>的方式调用,本来以为这个问题很简单,就是app端没有设置相机权限,造成的点击无反应情况,而实际上加了之后发现,并非简单的权限问题. 解决问题 因为Android的版本碎片问题,很多

  • Android数据持久化之File机制分析

    本文实例讲述了Android数据持久化之File机制.分享给大家供大家参考,具体如下: 在使用Java SE平台开发C/S结构的软件中,File 的IO输入输出流的使用率是非常高的,通过使用IO输入输出流可以对存储介质上的文件进行读写操作,下面的代码就是实现一个在Android平台上使用File对象操作文件的功能: package com.example.data_file; import java.io.File; import java.io.FileInputStream; import

  • Android中的webview支持页面中的文件上传实例代码

    Android webview在默认情况下是不支持网页中的文件上传功能的: 如果在网页中有<input type="file" />,在android webview中访问时也会出现浏览文件的按钮 但是点击按钮之后没有反应... 那么如何能够让android的webview能够响应,这个浏览按钮呢?在网上查了很多资料,很多相同的,但都漏掉了一个地方,导致无法读取到文件的完整地址("c:\upfile\233232.jpg"),整理最终代码入下: 我们需要

  • Android编程使WebView支持HTML5 Video全屏播放的解决方法

    本文实例讲述了Android编程使WebView支持HTML5 Video全屏播放的解决方法.分享给大家供大家参考,具体如下: 1)需要在AndroidManifest.xml文件中声明需要使用HardwareAccelerate, 可以细化到Activity级别,如果不需要的View可以声明不要用加速,但是需要在代码中做,具体如下: a. 如果要声明整个应用都要加速: 复制代码 代码如下: <application ... android:hardwareAccelerated ="tr

  • APACHE支持.htaccess伪静重写出错 No input file specified的解决方案

    在你的Apache安装文件夹conf里找到httpd.conf文件 搜索LoadModule rewrite_module modules/mod_rewrite.so 如果前面有注释符号#,请去掉. 搜索Options FollowSymLinks,然后将它下面的AllowOverride None 修改为AllowOverride All: [1] 没想到遇见了 No input file specified 因为项目用了URL route ,估摸着可能是rewrite的问题. 记录一下解决

  • Android WebView使用方法详解 附js交互调用方法

    目前很多Android app都内置了可以显示web页面的界面,会发现这个界面一般都是由一个叫做WebView的组件渲染出来的,学习该组件可以为你的app开发提升扩展性. 先说下WebView的一些优点: --可以直接显示和渲染web页面,直接显示网页 --webview可以直接用html文件(网络上或本地assets中)作布局 --和JavaScript交互调用 一.基本使用 首先layout中即为一个基本的简单控件: <WebView android:id="@+id/webView1

  • Android WebView 应用界面开发教程

    WebView组件本身就是一个浏览器实现,Android5.0增强的WebView基于Chromium M37,直接支持WebRTC.WebAudio.WebGL.开发者可以直接在WebView中使用聚合(Polymer)和Material设计. 一.WebView浏览网页(加载线上URL) WebView提供了很多方法执行浏览器操作,常用方法如下: void goBack():后退 void goForward():前进. void goBackOrForward(int step):step

  • ionic cordova一次上传多张图片(类似input file提交表单)的实现方法

    我们可以通过cordova提供的插件调用摄像头或图库选择需要的图片上传,按cordova官方的方法,每次选择完后就直接上传,这并不符合用户的习惯,最好的用户习惯是用户选择完需要的图片,并可在本地预览,接着用户再次打开摄像头或图库再次选择图片,接着预览,对于不需要的图片删除,最后确定可以后,再一次性上传所有图片.显然这种方式,cordova是不支持,那要如何实现呢,以下是我的方法: 通过调用$cordovaImagePicker.getPictures该方法打开图库,获得图片的URL地址,ps:相

随机推荐