【干货】安卓webview内嵌h5图片上传

为节省开发时间，最近用h5做了一个上传凭证的页面，通过android studio 打包成apk，本来通过框架的组件能方便的实现上传功能，因为开始没有使用dcloud，apicloud，懒得做较大改动，直接想法修改h5页面实现上传功能。h5本身是很方便的，但是做好的h5的上传功能通过手机浏览器，电脑浏览器都是正常的，但是打包成apk后，input type="file" 点击就没有任何反应了。搞了好久，才解决了这个问题。

直接来代码吧

android studio 3.6 ，

先上h5：

这个上传在浏览器中是好的，打包apk后不反应。

<div class="frambox">

<h2>以下信息无需填写</h2>

<div class="list_box">

<div class="m-cell demo-small-pitch">

<div class="cell-item">

<div class="cell-left">单号</div>

<div class="cell-right">

<input type="text" class="cell-input" readonly=readonly value="{$orderdetail.order_sn}"

autocomplete="off">

</div>

</div>

<div class="cell-item">

<div class="cell-left">拍出人</div>

<div class="cell-right">

<input type="text" class="cell-input" readonly=readonly value="{$orderdetail.netpoint}"

autocomplete="off">

</div>

</div>

<div class="cell-item">

<div class="cell-left">价值</div>

<div class="cell-right">

<input type="text" class="cell-input" readonly=readonly value="{$orderdetail.amount}"

autocomplete="off">

</div>

</div>

<div class="cell-item">

<div class="cell-left">说明</div>

<div class="cell-right">

<input type="text" class="cell-input" placeholder="点击此处可填写" value=""

autocomplete="off">

</div>

</div>

</div>

</div>

</div>

<div class="frambox">

<h2>上传支付凭证（二选一）</h2>

<div class="font_box">

<div class="m-grids-2">

<a href="javascript:sfzzmSc();" class="grids-item">

<div id="sfzzmImg" class="grids-icon">

<img src="images/shenfenzheng-a.png">

</div>

<div class="grids-txt">

<span>上传支付凭证1</span>

</div>

</a> <input style="display: none" id="sfzzm" type="file"

onchange="javascript:showpic(this,'sfzzmImg');" accept="image/*" multiple />

<a href="javascript:sfzfmSc();" class="grids-item">

<div id="sfzfmImg" class="grids-icon">

<img src="images/shenfenz-b.png">

</div>

<div class="grids-txt">

<span>上传支付凭证2</span>

</div>

</a> <input style="display: none" id="sfzfm" type="file"

onchange="javascript:showpic(this,'sfzfmImg');" accept="image/*" multiple />

</div>

</div>

</div>

<div class="btn_mian">

<a href="javascript:next();" class="btn btn-primary btnbom">确认买入</a>

</div>

安卓代码：

package com.tonglianandroid.xinlingshoushop;

import android.annotation.SuppressLint;
import android.annotation.TargetApi;
import android.app.Activity;
import android.content.ClipData;
import android.content.Intent;
import android.net.Uri;
import android.os.Build;
import android.os.Bundle;
import android.webkit.ValueCallback;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;

import androidx.appcompat.app.AppCompatActivity;

import com.tongliananroid.xinlingshoushop.R;

public class MainActivity extends AppCompatActivity {


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

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

        WebView webview = (WebView) findViewById(R.id.web);
        WebSettings settings = webview.getSettings();
        settings.setUseWideViewPort(true);
        settings.setLoadWithOverviewMode(true);
        settings.setJavaScriptEnabled(true);
        // 1.设置WebChromeClient，重写文件上传回调
        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 = "https://www.1235.com/game_center/";
        webview.loadUrl(targetUrl);
    }

    // 2.回调方法触发本地选择文件
    private void openImageChooserActivity() {
        Intent i = new Intent(Intent.ACTION_GET_CONTENT);
        i.addCategory(Intent.CATEGORY_OPENABLE);
//        i.setType("image/*");//图片上传
//        i.setType("file/*");//文件上传
        i.setType("*/*");//文件上传
        startActivityForResult(Intent.createChooser(i, "Image Chooser"), FILE_CHOOSER_RESULT_CODE);
    }

    // 3.选择图片后处理
    @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();
            // 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;
            }
        } else {
            //这里uploadMessage跟uploadMessageAboveL在不同系统版本下分别持有了
            //WebView对象，在用户取消文件选择器的情况下，需给onReceiveValue传null返回值
            //否则WebView在未收到返回值的情况下，无法进行任何操作，文件选择器会失效
            if (uploadMessage != null) {
                uploadMessage.onReceiveValue(null);
                uploadMessage = null;
            } else if (uploadMessageAboveL != null) {
                uploadMessageAboveL.onReceiveValue(null);
                uploadMessageAboveL = null;
            }
        }
    }

    // 4. 选择内容回调到Html页面
    @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;
    }
}

效果：

代码简单easy！