一般系统的实现方式：

  • 代码实现
<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>图片预览</title>

    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>

</head>

<body>

    <p>

        <img class="img" width="100" height="100" id="previewimg">

    </p>

    <input class="select" type="file" id="picfile">

    <script>

        $('.select').change(function(e) {

            var _URL = window.URL || window.webkitURL;

            $("#previewimg").attr("src", _URL.createObjectURL(this.files[0]))

        })

    </script>

</body>

</html>
  • 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{

        //显示图片预览

}

    }

android系统webview使用input实现选择文件并预览的更多相关文章

  1. input file选择图片后 预览

    很多前端都选择用插件来实现图片预览,这个小功能也可以很简单的用jQuery来实现 简单的jQuery实现input file选择图片后,可以预览图片的效果 简单的HTML代码: <div> ...

  2. HTML5: 实现调用系统拍照或者选择照片并预览

    ylbtech-HTML5: 实现调用系统拍照或者选择照片并预览 1.返回顶部 1. <!DOCTYPE html> <html> <head> <meta ...

  3. vue使用readAsDataURL实现选择图片文件后预览

    vue实现选择图片文件后预览 利用h5的api可以实现选择文件并实现预览 readAsDataURL 方法会读取指定的 Blob 或 File 对象.读取操作完成的时候,readyState 会变成已 ...

  4. Java实现文件的预览

    最近项目需要用到文件的预览功能,就开始在网上收集资料,学习了几种文件预览的方法.我集成到我项目内测试的有以下三种,最后使用的是第三种: 直接使用别人提供的服务 例如:office web 365 使用 ...

  5. vue <input type="file">上传图片、预览、删除

    使用原生<input type="file">上传图片.预览.删除:multiple实现可上传多张 参数名 类型 说明 fileTypes Array 文件类型, 默认 ...

  6. 基于开源方案构建统一的文件在线预览与office协同编辑平台的架构与实现历程

    大家好,又见面了. 在构建业务系统的时候,经常会涉及到对附件的支持,继而又会引申出对附件在线预览.在线编辑.多人协同编辑等种种能力的诉求. 对于人力不是特别充裕.或者项目投入预期规划不是特别大的公司或 ...

  7. JS代码实用代码实例（输入框监听，点击显示点击其他地方消失,文件本地预览上传)

    前段时间写前端,遇到一些模块非常有用,总结以备后用 一.input框字数监听 <!DOCTYPE html> <html lang="en"> <he ...

  8. office文件的预览

    使用FlexPaper实现office文件的预览(C#版) 需求很简单,用户上传office文件(word.excel.ppt)后,可以预览上传的这些文件.搜索的相关的资料后.整理如下: Step1. ...

  9. 关于confluence上传文件附件预览查看时出现乱码的问题解决办法

    在confluence上传excel文件,预览时发现乱码问题主要是因为再上传文件的时候一般是Windows下的文件上传,而预览的时候,是linux下的环境,由于linux下没有微软字体,所以预览的时候 ...

随机推荐

  1. hdu4417 主席树求区间小于等于K

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4417   Problem Description Mario is world-famous plum ...

  2. git 工作中实用合并分支

    合并分支 .克隆远程分支 git clone -b dev1. url .创建本地分支,并关联远程分支 git checkout -b dev_wt orgin/dev_wt .合并某分支到当前分支 ...

  3. ubuntu系统下载后的.deb软件安装命令

    查看某个软件是否安装,比如查看QQ软件是否安装并列出软件包名: dpkg -l | grep qq 删除某款软件:sudo dpkg -r 软件包名 安装软件 : sudo dpkg -i *.deb

  4. 如何用rflask快速初始化Flask Restful项目

    如何用rflask快速初始化Flask Restful项目 说明 多啰嗦两句 我们在创建flask项目的时候,使用pycharm创建出来的项目比较简陋,而且随着项目的功能完善,项目目录结构会比较多,多 ...

  5. 微软CEO：我们员工以及他们家人的健康与安全是我们最高的优先级！

    在肺炎疫情开始之初,微软中国各个部门就立即采取了各种的防控和关怀措施. 在昨天,微软 CEO Satya Nadella 给微软中国全体员工写了一封邮件. 其中,最让我们感动的就是这句话:" ...

  6. view 视图函数

    一 Django的视图函数view 一个视图函数(类),简称视图,是一个简单的Python 函数(类),它接受Web请求并且返回Web响应. 响应可以是一张网页的HTML内容,一个重定向,一个404错 ...

  7. codeforces 1278F - Cards(第二类斯特林数+二项式)

    传送门 解题过程: \(答案=\sum^n_{i=0}*C^i_n*{\frac{1}{m}}^i*{\frac{m-1}{m}}^{n-i}*i^k\) 根据第二类斯特林数的性质\(n^k=\sum ...

  8. Web自动化测试项目（二）BasePage实现

    一.BasePage介绍 创建一个BasePage类,对Selenium Api进行二次封装 为了快速创建项目并投产,用到的Selenium Api才进行封装,没用到的则不封装 优先封装最重要的几个方 ...

  9. Nginx(一) 简介

    Nginx简介 一款基于异步框架的轻量级高性能的Web 服务器/反向代理服务器/缓存服务器/电子邮件(IMAP/POP3)代理服务器 特点 高并发量:基于 epoll/kqueue 模型开发,支持高并 ...

  10. DOCKER 学习笔记5 Springboot+nginx+mysql 容器编排

    前言 在上节的内容中,我们已经通过一个简单的实例,将Docker-compose 进行了实际的应用.这一小节中.我们将通过学习和了解,着重认识容器的编排,上一节只算是一个小小的测试.在这一节中.我们将 ...