Android WebView那些坑之上传文件示例

最近公司项目需要在WebView上调用手机系统相册来上传图片,开发过程中发现在很多机器上无法正常唤起系统相册来选择图片。

解决问题之前我们先来说说WebView上传文件的逻辑:当我们在Web页面上点击选择文件的控件(<input type="file">)时,会回调WebChromeClient下的openFileChooser()(5.0及以上系统回调onShowFileChooser())。这个时候我们在openFileChooser方法中通过Intent打开系统相册或者支持该Intent的第三方应用来选择图片。like this:

public void openFileChooser(ValueCallback<Uri> valueCallback, String acceptType, String capture) {
 uploadMessage = valueCallback;
  openImageChooserActivity();
}

private void openImageChooserActivity() {
 Intent i = new Intent(Intent.ACTION_GET_CONTENT);
 i.addCategory(Intent.CATEGORY_OPENABLE);
 i.setType("image/*");
 startActivityForResult(Intent.createChooser(i,
    "Image Chooser"), FILE_CHOOSER_RESULT_CODE);
}

最后我们在onActivityResult()中将选择的图片内容通过ValueCallback的onReceiveValue方法返回给WebView,然后通过js上传。代码如下:

@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
 super.onActivityResult(requestCode, resultCode, data);
 if (requestCode == FILE_CHOOSER_RESULT_CODE) {
  Uri result = data == null || resultCode != RESULT_OK ? null : data.getData();
  if (uploadMessage != null) {
   uploadMessage.onReceiveValue(result);
   uploadMessage = null;
  }
 }
}

PS:ValueCallbacks是WebView组件通过openFileChooser()或者onShowFileChooser()提供给我们的,它里面包含了一个或者一组Uri,然后我们在onActivityResult()里将Uri传给ValueCallbacks的onReceiveValue()方法,这样WebView就知道我们选择了什么文件。

webview.setWebChromeClient(new WebChromeClient() {

  // For Android < 3.0
  public void openFileChooser(ValueCallback<Uri> valueCallback) {
   ***
  }

  // For Android >= 3.0
  public void openFileChooser(ValueCallback valueCallback, String acceptType) {
   ***
  }

  //For Android >= 4.1
  public void openFileChooser(ValueCallback<Uri> valueCallback,
    String acceptType, String capture) {
   ***
  }

  // For Android >= 5.0
  @Override
  public boolean onShowFileChooser(WebView webView,
    ValueCallback<Uri[]> filePathCallback,
    WebChromeClient.FileChooserParams fileChooserParams) {
   ***
   return true;
  }
 });

到这里你可能要问了,说了这么多还是没解释为什么在很多机型上无法唤起系统相册或者第三方app来选择图片啊?!这是因为为了最求完美的Google攻城狮们对openFileChooser做了多次修改,在5.0上更是将回调方法该为了onShowFileChooser。所以为了解决这一问题,兼容各个版本,我们需要对openFileChooser()进行重载,同时针对5.0及以上系统提供onShowFileChooser()方法:

webview.setWebChromeClient(new WebChromeClient() {

  // For Android < 3.0
  public void openFileChooser(ValueCallback<Uri> valueCallback) {
   ***
  }

  // For Android >= 3.0
  public void openFileChooser(ValueCallback valueCallback, String acceptType) {
   ***
  }

  //For Android >= 4.1
  public void openFileChooser(ValueCallback<Uri> valueCallback,
    String acceptType, String capture) {
   ***
  }

  // For Android >= 5.0
  @Override
  public boolean onShowFileChooser(WebView webView,
    ValueCallback<Uri[]> filePathCallback,
    WebChromeClient.FileChooserParams fileChooserParams) {
   ***
   return true;
  }
 });

大家应该注意到onShowFileChooser()中的ValueCallback包含了一组Uri(Uri[]),所以针对5.0及以上系统,我们还需要对onActivityResult()做一点点处理。这里不做描述,最后我再贴上完整代码。

当处理完这些后你以为就万事大吉了?!当初我也这样天真,但当我们打好release包测试的时候却又发现没法选择图片了!!!真是坑了个爹啊!!!无奈去翻WebChromeClient的源码,发现openFileChooser()是系统API,我们的release包是开启了混淆的,所以在打包的时候混淆了openFileChooser(),这就导致无法回调openFileChooser()了。

/**
 * Tell the client to open a file chooser.
 * @param uploadFile A ValueCallback to set the URI of the file to upload.
 *  onReceiveValue must be called to wake up the thread.a
 * @param acceptType The value of the 'accept' attribute of the input tag
 *   associated with this file picker.
 * @param capture The value of the 'capture' attribute of the input tag
 *   associated with this file picker.
 *
 * @deprecated Use {@link #showFileChooser} instead.
 * @hide This method was not published in any SDK version.
 */
@SystemApi
@Deprecated
public void openFileChooser(ValueCallback<Uri> uploadFile, String acceptType, String capture) {
 uploadFile.onReceiveValue(null);
}

解决方案也很简单,直接不混淆openFileChooser()就好了。

-keepclassmembers class * extends android.webkit.WebChromeClient{
  public void openFileChooser(...);
}

支持关于上传文件的所有坑都填完了,最后附上完整源码:

public class MainActivity extends AppCompatActivity {

 private ValueCallback<Uri> uploadMessage;
 private ValueCallback<Uri[]> uploadMessageAboveL;
 private final static int FILE_CHOOSER_RESULT_CODE = 10000;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);

  WebView webview = (WebView) findViewById(R.id.web_view);
  assert webview != null;
  WebSettings settings = webview.getSettings();
  settings.setUseWideViewPort(true);
  settings.setLoadWithOverviewMode(true);
  settings.setJavaScriptEnabled(true);
  webview.setWebChromeClient(new WebChromeClient() {

   // For Android < 3.0
   public void openFileChooser(ValueCallback<Uri> valueCallback) {
    uploadMessage = valueCallback;
    openImageChooserActivity();
   }

   // For Android >= 3.0
   public void openFileChooser(ValueCallback valueCallback, String acceptType) {
    uploadMessage = valueCallback;
    openImageChooserActivity();
   }

   //For Android >= 4.1
   public void openFileChooser(ValueCallback<Uri> valueCallback, String acceptType, String capture) {
    uploadMessage = valueCallback;
    openImageChooserActivity();
   }

   // For Android >= 5.0
   @Override
   public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, WebChromeClient.FileChooserParams fileChooserParams) {
    uploadMessageAboveL = filePathCallback;
    openImageChooserActivity();
    return true;
   }
  });
  String targetUrl = "file:///android_asset/up.html";
  webview.loadUrl(targetUrl);
 }

 private void openImageChooserActivity() {
  Intent i = new Intent(Intent.ACTION_GET_CONTENT);
  i.addCategory(Intent.CATEGORY_OPENABLE);
  i.setType("image/*");
  startActivityForResult(Intent.createChooser(i, "Image Chooser"), FILE_CHOOSER_RESULT_CODE);
 }

 @Override
 protected void onActivityResult(int requestCode, int resultCode, Intent data) {
  super.onActivityResult(requestCode, resultCode, data);
  if (requestCode == FILE_CHOOSER_RESULT_CODE) {
   if (null == uploadMessage && null == uploadMessageAboveL) return;
   Uri result = data == null || resultCode != RESULT_OK ? null : data.getData();
   if (uploadMessageAboveL != null) {
    onActivityResultAboveL(requestCode, resultCode, data);
   } else if (uploadMessage != null) {
    uploadMessage.onReceiveValue(result);
    uploadMessage = null;
   }
  }
 }

 @TargetApi(Build.VERSION_CODES.LOLLIPOP)
 private void onActivityResultAboveL(int requestCode, int resultCode, Intent intent) {
  if (requestCode != FILE_CHOOSER_RESULT_CODE || uploadMessageAboveL == null)
   return;
  Uri[] results = null;
  if (resultCode == Activity.RESULT_OK) {
   if (intent != null) {
    String dataString = intent.getDataString();
    ClipData clipData = intent.getClipData();
    if (clipData != null) {
     results = new Uri[clipData.getItemCount()];
     for (int i = 0; i < clipData.getItemCount(); i++) {
      ClipData.Item item = clipData.getItemAt(i);
      results[i] = item.getUri();
     }
    }
    if (dataString != null)
     results = new Uri[]{Uri.parse(dataString)};
   }
  }
  uploadMessageAboveL.onReceiveValue(results);
  uploadMessageAboveL = null;
 }
}

源码地址: http://xiazai.jb51.net/201701/yuanma/WebViewSample_jb51.rar

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android WebView 上传文件支持全解析

    默认情况下情况下,使用Android的WebView是不能够支持上传文件的.而这个,也是在我们的前端工程师告知之后才了解的.因为Android的每个版本WebView的实现有差异,因此需要对不同版本去适配.花了一点时间,参考别人的代码,这个问题已经解决,这里把我踩过的坑分享出来. 主要思路是重写WebChromeClient,然后在WebViewActivity中接收选择到的文件Uri,传给页面去上传就可以了. 创建一个WebViewActivity的内部类 public class XHSWe

  • 浅谈关于Android WebView上传文件的解决方案

    我们在开发需求的时候,难免会接入一下第三方的H5页面,有些H5页面是具有上传照片的功能,Android 中的 WebView是不能直接打开文件选择弹框的 接下来我讲简单提供一下解决方案,先说一下思路 1.接收WebView打开文件选择器的通知 2.收到通知后,打开文件选择器等待用户选择需要上传的文件 3.在onActivityResult中得到用户选择的文件的Uri 4.然后把Uri传递给Html5 这样就完成了一次H5选择文件的过程,下面我把代码贴出来自习看一下 首先,WebView必须要支持

  • Android 解决WebView无法上传文件的问题

    Android 解决WebView无法上传文件的问题 Android原生的WebView并不支持上传文件,需要我们自己实现相应的方法.于是我把工作中的相关代码记录下来.下次直接拿来用就行了.一点一滴都是经验. 1.需要定义三个变量 private ValueCallback<Uri[]> uploadMessageAboveL; private final static int FILE_CHOOSER_RESULT_CODE = 10000; private ValueCallback<

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

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

  • Android WebView那些坑之上传文件示例

    最近公司项目需要在WebView上调用手机系统相册来上传图片,开发过程中发现在很多机器上无法正常唤起系统相册来选择图片. 解决问题之前我们先来说说WebView上传文件的逻辑:当我们在Web页面上点击选择文件的控件(<input type="file">)时,会回调WebChromeClient下的openFileChooser()(5.0及以上系统回调onShowFileChooser()).这个时候我们在openFileChooser方法中通过Intent打开系统相册或

  • jquery uploadify和apache Fileupload实现异步上传文件示例

    jQuery Uploadify + Apache Fileupload异步上传文件示例1.可以限制上传文件大小和类型,理论上任何类型的文件都可以上传(自己根据api配置即可):2.后台使用Apache commons-fileupload-1.3.1.jar作为上传工具包,本示例支持一次性多文件上传:3.文件上传目录可以任意指定,请在web.xml中配置:Uploadify api 详见http://www.uploadify.com/documentation/ FileUploadServ

  • Python调用scp向服务器上传文件示例

    最近做的项目中有一个小功能:在python中调用scp命令 使用ssh登录,然后将指定目录中的图片上传到服务器指定目录 网上搜了很多方法都没用,最后终于碰到一个可以成功上传的,特此记录 import paramiko # 用于调用scp命令 from scp import SCPClient # 将指定目录的图片文件上传到服务器指定目录 # remote_path远程服务器目录 # file_path本地文件夹路径 # img_name是file_path本地文件夹路径下面的文件名称 def u

  • Flask入门之上传文件到服务器的方法示例

    今天要做一个简单的页面,可以实现将文件 上传到服务器(保存在指定文件夹) #Sample.py # coding:utf-8 from flask import Flask,render_template,request,redirect,url_for from werkzeug.utils import secure_filename import os app = Flask(__name__) @app.route('/upload', methods=['POST', 'GET'])

  • PHP实现ftp上传文件示例

    FTP上传是PHP实现的一个常见且非常重要的应用技巧,今天就来与大家分享一下PHP实现FTP上传文件的简单示例.希望对大家的PHP学习能带来一定的帮助. 主要代码如下: function make_directory($ftp_stream, $dir){ // if directory already exists or can be immediately created return true if ($this->ftp_is_dir($ftp_stream, $dir) || @ftp

  • springmvc利用jquery.form插件异步上传文件示例

    需要的下载文件: jQuery.form.js jquery.js commons-fileupload.jar commons-io.jar 示例图片 pom.xml <!-- 文件上传 --> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3</ve

  • Android中实现OkHttp上传文件到服务器并带进度

    在上一讲中 OkHttp下载文件并带进度条 中,我们知道怎样去下载文件了.那上传文件呢 一.编写服务器端 在上一讲服务器下新建UploadFileServlet,代码如下:然后重启服务器! @WebServlet("/UploadFileServlet") @MultipartConfig public class UploadFileServlet extends HttpServlet { private static final long serialVersionUID = 1

  • ASP.NET设计网络硬盘之上传文件实现代码

    1.界面布置 这部分功能涉及到的控件主要有两个:一个是(ID)为WebFile的File Field控件,用来浏览上传文件路径:另一个是(ID)为btnUpLoad的上传按钮,单击它完成文件上传. 2.代码实现 在"设计"面板中双击btnUpLoad按钮,为其添加事件处理,其代码如下所示: 复制代码 代码如下: private void BtnUpload_Click(object sender, System.EventArgs e) { if(WebFile.PostedFile.

  • Yii2实现UploadedFile上传文件示例

    闲来无事,整理了一下自己写的文件上传类. 通过 UploadFile::getInstance($model, $attribute); UploadFile::getInstances($model, $attribute); UploadFile::getInstanceByName($name); UploadFile::getInstancesByName($name); 把表单上传的文件赋值到  UploadedFile中的  private static $_files  中 /**

  • PHP入门教程之上传文件实例详解

    本文实例讲述了PHP上传文件的方法.分享给大家供大家参考,具体如下: Demo1.php <form enctype="multipart/form-data" action="Demo2.php" method="post"> <input type="hidden" name="MAX_FILE_SIZE" value="2000000" /> 上传文件: &

随机推荐