android系统webview使用input实现选择文件并预览

相关文章推荐

迷茫的煎鸡蛋 · How to Open Local PDF ...· 1 月前 ·

欢快的围巾 · pdf.js缓存PDF文件吗？开发者社区· 1 月前 ·

爱喝酒的橙子 · wkwebView基本使用方法_- ...· 1 月前 ·

苦闷的生姜 · iOS中WKWebView的应用_ios开发 ...· 1 月前 ·

大气的饼干 · IOS14以下的版本，webView中调用系 ...· 1 月前 ·

坚强的啄木鸟 · 火箭军方队：首次以战略军种名义亮相国庆阅兵-新华网· 7 月前 ·

酷酷的生姜 · 美股底在何方？二次触底进行时_全球经济危机· 1 年前 ·

痴情的饼干 · 解决R语言创建一个下三角全1矩阵的具体操作步 ...· 1 年前 ·

长情的斑马 · 第43话-飞越疯人院-快从我身上下去！-漫画牛· 1 年前 ·

乐观的长颈鹿 · 广东省人民政府关于实施轻型汽车国六排放标准的 ...· 1 年前 ·

图片预览

input type="file"就是文件选择标签，默认样式为：
如果不喜欢默认样式，可以把它设置为透明，然后自己用图片或元素覆盖它，这时候他仍然能响应点击

opacity: 0;
multiple="multiple" 属性可以让input一次选择多个文件
注册change监听或定义onChange方法可以在选择完图片后回调，回调中使用files数组属性来获取选择的文件，如果是选择单文件，files[0]表示选择的图片
jquery回调中，this会自动指向当前操作的元素，例子中的this和getElementById("picfile")相对，如果要使用jquery方法，可以用$(this)
oninput事件在元素值发生变化时立即触发， onchange在元素失去焦点时触发，如果是输入文字，oninput在输入过程中一直回调（输入或删除一个文字就会调用一次），onchange在输入完成，点击其他地方调用。
createObjectURL把file对象转为url让img标签显示
android系统的实现
安卓webview系统无法通过input打开系统选择文件框，必须在原生里面拦截webview事件，选择完文件，处理相关逻辑（比如上传文件到oss）后回调到webview
wvmain.setWebChromeClient(new WebChromeClient(){
            //For Android  >= 5.0
            @Override
            public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) {
                uploadMessageAboveL = filePathCallback;
                uploadPicture();
                return true;
            //For Android  >= 4.1
            public void openFileChooser(ValueCallback<Uri> valueCallback, String acceptType, String capture) {
                uploadMessage = valueCallback;
                uploadPicture();
选择并处理完文件后，调用Callback（valueCallback 或 filePathCallback）的onReceiveValue方法，webview里的input标签才会调用onchange

比如以下是选择完文件后，上传文件到oss成功后的回调里，如果成功得到oss图片地址，则调用onReceiveValue方法把图片的本地uri回传给webview，失败或异常情况回传null给webview
public void successImg(String img_url) {
                            if (img_url != null){
                                curPicUrl = img_url;
                                mHandle.sendEmptyMessage(UPLOAD_SUCESS);
                                if (uploadMessage != null) {
                                    uploadMessage.onReceiveValue(imageUri);
                                    uploadMessage = null;
                                if (uploadMessageAboveL != null) {
                                    uploadMessageAboveL.onReceiveValue(new Uri[]{imageUri});
                                    uploadMessageAboveL = null;
                            }else{
                                curPicUrl = "";
                                mHandle.sendEmptyMessage(UPLOAD_FAIL);
                                if (uploadMessage != null) {
                                    uploadMessage.onReceiveValue(null);
                                    uploadMessage = null;
                                if (uploadMessageAboveL != null) {
                                    uploadMessageAboveL.onReceiveValue(null);
                                    uploadMessageAboveL = null;
如果回传null给webview，如果input里面之前还没有文件， input的onchange，oninput方法不会调用，如果之前已经选择过文件，files对象之前里面有内容，现在内容会变成空，发生了改变,onchange，oninput方法都会调用(先调用oninput)，但是files对象的长度为0，可以根据files的长度来做不同的处理，比如：
doChange() {
      var file = document.getElementById("fileInput");
      if(file.files.length == 0){//清除之前的图片
        document.getElementById("showpic" + i).style.display = "none";
        return;
      }else{
        //显示图片预览