Android WebView JS代码调用手机相册无效

最新推荐文章于 2021-08-04 14:24:10 发布

转载最新推荐文章于 2021-08-04 14:24:10 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/weixin_43901866/article/details/86678529

文章标签：

#android

安卓专栏收录该内容

39 篇文章

订阅专栏

本文详细介绍了如何解决在不同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就知道我们选择了什么文件。

到这里你可能要问了，说了这么多还是没解释为什么在很多机型上无法唤起系统相册或者第三方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;
    }
}

以上部分为转载大神帖子，以下部分是JS代码调用本机图片部分代码：

$file.on('change', function (e) {
 debugger;
    //上传过图片后再次上传时限值数量
    var numold = $('.file-list li').length;
    if(numold >= 3){
        alert('最多上传3张图片');
        return;
    }
    //限制单次批量上传的数量
    var num = e.target.files.length;
    var numall = numold + num;
    if(num >3 ){
       alert('最多上传3张图片');
       return;
    }else if(numall > 3){
        alert('最多上传3张图片');
        return;
    }
    //原生的文件对象，相当于$file.get(0).files;//files[0]为第一张图片的信息;
    curFile = this.files;
    //curFile = $file.get(0).files;
    //console.log(curFile);
    //将FileList对象变成数组
    fileList = fileList.concat(Array.from(curFile));
    //console.log(fileList);
    for (var i = 0, len = curFile.length; i < len; i++) {
        reviewFile(curFile[i])
    }
    $('.file-list').fadeIn(2500);
})
function reviewFile(file) {
    //实例化fileReader,
    var fd = new FileReader();
    //获取当前选择文件的类型
    var fileType = file.type;
    //调它的readAsDataURL并把原生File对象传给它，
    fd.readAsDataURL(file);//base64
    //监听它的onload事件，load完读取的结果就在它的result属性里了
    fd.onload = function () {
        if (/^image\/[jpeg|png|jpg|gif]/.test(fileType)) {
            $list.append('<li class="file-item">< img src="' + this.result + '" alt=""><div class="file-del"></div></li>').children(':last').hide().fadeIn(2500);
        } else {
            $list.append('<li class="file-item"><span class="file-name">' + file.name + '</span><div class="file-del"></div></li>')
        }

    }
}