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

最近因为赶项目进度,因此将本来要用原生控件实现的界面,自己做了H5并嵌入webview中。发现点击H5中 input type="file" 标签 不能打开android资源管理器。

通过网络搜索发现是因为 android webview 由于考虑安全原因屏蔽了 input type="file" 这个功能 。

经过不懈的努力,以及google 翻译的帮助 在 stackoverflow 中找到了解决的方法。

具体可以理解为 重写webview 的WebChromeClient ,废话不多说直接贴代码:

private ValueCallback<Uri> mUploadMessage;
public ValueCallback<Uri[]> uploadMessage;
public static final int REQUEST_SELECT_FILE = 100;
private final static int FILECHOOSER_RESULTCODE = 2;
webview.setWebChromeClient(new WebChromeClient(){
    // For 3.0+ Devices (Start)
    // onActivityResult attached before constructor
    protected void openFileChooser(ValueCallback uploadMsg, String acceptType)
    {
      mUploadMessage = uploadMsg;
      Intent i = new Intent(Intent.ACTION_GET_CONTENT);
      i.addCategory(Intent.CATEGORY_OPENABLE);
      i.setType("image/*");
      startActivityForResult(Intent.createChooser(i, "File Browser"), FILECHOOSER_RESULTCODE);
    }
    // For Lollipop 5.0+ Devices
    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    public boolean onShowFileChooser(WebView mWebView, ValueCallback<Uri[]> filePathCallback, WebChromeClient.FileChooserParams fileChooserParams)
    {
      if (uploadMessage != null) {
        uploadMessage.onReceiveValue(null);
        uploadMessage = null;
      }
      uploadMessage = filePathCallback;
      Intent intent = fileChooserParams.createIntent();
      try
      {
        startActivityForResult(intent, REQUEST_SELECT_FILE);
      } catch (ActivityNotFoundException e)
      {
        uploadMessage = null;
        Toast.makeText(getBaseContext(), "Cannot Open File Chooser", Toast.LENGTH_LONG).show();
        return false;
      }
      return true;
    }
    //For Android 4.1 only
    protected void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType, String capture)
    {
      mUploadMessage = uploadMsg;
      Intent intent = new Intent(Intent.ACTION_GET_CONTENT);
      intent.addCategory(Intent.CATEGORY_OPENABLE);
      intent.setType("image/*");
      startActivityForResult(Intent.createChooser(intent, "File Browser"), FILECHOOSER_RESULTCODE);
    }
    protected void openFileChooser(ValueCallback<Uri> uploadMsg)
    {
      mUploadMessage = uploadMsg;
      Intent i = new Intent(Intent.ACTION_GET_CONTENT);
      i.addCategory(Intent.CATEGORY_OPENABLE);
      i.setType("image/*");
      startActivityForResult(Intent.createChooser(i, "File Chooser"), FILECHOOSER_RESULTCODE);
    }
  });
}
@Override
public void onActivityResult(int requestCode, int resultCode, Intent intent)
{
  if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP)
  {
    if (requestCode == REQUEST_SELECT_FILE)
    {
      if (uploadMessage == null)
        return;
      uploadMessage.onReceiveValue(WebChromeClient.FileChooserParams.parseResult(resultCode, intent));
      uploadMessage = null;
    }
  }
  else if (requestCode == FILECHOOSER_RESULTCODE)
  {
    if (null == mUploadMessage)
      return;
    // Use MainActivity.RESULT_OK if you're implementing WebView inside Fragment
    // Use RESULT_OK only if you're implementing WebView inside an Activity
    Uri result = intent == null || resultCode != MainActivity.RESULT_OK ? null : intent.getData();
    mUploadMessage.onReceiveValue(result);
    mUploadMessage = null;
  }
  else
    Toast.makeText(getBaseContext(), "Failed to Upload Image", Toast.LENGTH_LONG).show();
}

以上所述是小编给大家介绍的Android WebView 不支持 H5 input type="file" 解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • Android的WebView与H5前端JS代码交互的实例代码

    前段时间项目有深度和前端对接过,也是碰了一些坑,现在有时间就拿出来分享下 JS调用原生不外乎就两种,一种是传假的url,也就是url拦截的方式,类似于下面这种: //js代码 function sendCommand(param){ var url="js-call://"+param; document.location = url; } sendCommand("PlaySnake"); //Java代码 mWebView.setWebViewClient(ne

  • Android 解决WebView调用loadData()方法显示乱码的问题

    Android 解决WebView调用loadData()方法显示乱码的问题 第一步: mWebView.getSettings().setDefaultTextEncodingName("UTF-8"); 第二步: mWebView.loadData(data, "text/html; charset=UTF-8", null); WebView常用配置: private void initWebView() { mWebView.getSettings().se

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

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

  • 详解Android WebView加载html片段

    这里我先简单描述一下需求:服务器返回的是html页面的一部分带有标签的内容. 解决的思路是:将服务器返回的内容片段拼凑成一个完整的页面. 下面直接上核心代码: 这里是WebView一些配置 WebSettings settings = webView.getSettings(); settings.setJavaScriptEnabled(true); settings.setDomStorageEnabled(true); settings.setUseWideViewPort(true);

  • Android WebView自定义长按选择实现收藏/分享选中文本功能

    效果图(1.3M) 一.前言 ** 戳这里可以去DEMO,来吧 ** 相信刚接触android不久的同志们,在面对产品提出的 : "自定义WebView页面中,长按文本的弹出选项.点击选择后,分享.转发.收藏选择文本" 这样的需求时,第一反应大部分是:这是系统行为,如果实现需要在web端实现. 但是web端实现的局限性太大,曾经也有过监听系统粘贴板,在用户点击复制的时候实现其他的逻辑,但是这样用户体验不好,所以自定义WebView中长按的弹出菜单,并在点击时返回选中文本的小控件闪亮登场

  • Android WebView的使用方法及与JS 相互调用

    Android WebView的使用方法及与JS 相互调用 1.添加网络权限 <uses-permission android:name="android.permission.INTERNET" /> 2.WebSettings 对访问页面进行设置. WebView mWebView = new WebView(this); WebSettings webSettings = mWebView .getSettings();//支持获取手势焦点,输入用户名.密码或其他 m

  • 详解Android Webview加载网页时发送HTTP头信息

    详解Android Webview加载网页时发送HTTP头信息 当你点击一个超链接进行跳转时,WebView会自动将当前地址作为Referer(引荐)发给服务器,因此很多服务器端程序通过是否包含referer来控制盗链,所以有些时候,直接输入一个网络地址,可能有问题,那么怎么解决盗链控制问题呢,其实在webview加载时加入一个referer就可以了,如何添加呢? 从Android 2.2 (也就是API 8)开始,WebView新增加了一个接口方法,就是为了便于我们加载网页时又想发送其他的HT

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

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

  • Android WebView打开网页一片空白的解决方法

    问题描述: 网页链接是Https链接 网页链接在电脑的Chrome浏览器中打开正常 网页链接在手机的Chrome浏览器中打开正常 网页链接在IOS的App上打开正常 网页链接在Android App中打开一片空白,没有任何提示 问题原因 试了很多方法,最后发现是Https的证书有问题,由于网页链接是客户提供的,不知道证书是如何生成的,导致不被Android系统信任 问题的发现之旅 网页链接在手机和电脑都能打开,所以想着网页链接本身应该没有问题. debug网页加载的过程也没有发现问题 但是后来用

  • vue中使用input[type="file"]实现文件上传功能

    注意:input[type="file"] 标签中的属性accept="application/msword,application/pdf" 在pc上正常,但是在手机ios和android上这个文件格式限制会被忽略,所以需要在js中增加格式的判断,以及对应显示样式的设置.(我也是刚发现,如果有遇到这个问题的可以参考下---下面有更改:) ``` <template> <div id="my-careers"> <h

  • Android webview加载H5方法详细介绍

    目录 1,安卓APP 怎么用webview加载H5 2,H5怎么调用安卓定义的方法 3,安卓怎么调用H5定义的方法 这篇文章主要阐述3个知识点 安卓APP 怎么用webview加载H5 H5怎么调用安卓定义的方法 安卓怎么调用H5定义的方法 1,安卓APP 怎么用webview加载H5 安卓端定义个webview xml 页面,代码如下所示: <?xml version="1.0" encoding="utf-8"?> <WebView xmlns

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

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

  • jQuery实现input[type=file]多图预览上传删除等功能

    下面我们了解一下,多图上传时,怎么实现预览.上传.删除等功能.下图是功能实现的预览效果,虽然样式有点丑,不过功能还是实现了.话不多说,直接看代码会更直观一些. 首先定义一下基本格式,样式代码自行脑补: <body> <div class="upload-header"> <input id="upload" type="file" accept="image/*" multiple="m

  • android 关于webview 加载h5网页开启定位的方法

    如下所示: //webview定位相关设置 settings.setDomStorageEnabled(true); settings.setGeolocationEnabled(true); //settings.setGeolocationDatabasePath(getFilesDir().getPath()); progressWebView.setWebChromeClient(new WebChromeClient() { @Override public void onGeoloc

  • firefox下input type="file"的size是多大

    但是这个size值怎么设置,size="10"是多宽,默认值又是多少,不能光凭感觉去设置. 用脚本来查看下: 复制代码 代码如下: <script type="text/javascript"> $(function() { var fileArray = []; var i = 0; while (i < 100) { fileArray.push(i + ":<input type='file' size='" + i

  • js 实现 input type="file" 文件上传示例代码

    在开发中,文件上传必不可少,<input type="file" /> 是常用的上传标签,但是它长得又丑.浏览的字样不能换,我们一般会用让,<input type="file" />隐藏,点其他的标签(图片等)来时实现选择文件上传功能. 看代码: 复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <he

  • js 获取、清空input type="file"的值(示例代码)

    上传控件(<input type="file"/>)用于在客户端浏览并上传文件,用户选取的路径可以由value属性获取,但value属性是只读的,不能通过 javascript来赋值,这就使得不能通过value=""语句来清空它.很容易理解为什么只读,如果可以随意赋值的话,那么用户只要打开你的网页, 你就可以随心所欲的上传他电脑上的文件了. js 获取<intput type=file />的值 复制代码 代码如下: <html>

随机推荐