<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        progress {

            width: 168px;

            height: 5px;

            color: #f00;

            background: #EFEFF4;

            border-radius: 0.1rem;

        }

        /* 表示总长度背景色 */

        progress::-webkit-progress-bar {

            background-color: #f2f2f2;

            border-radius: 0.2rem;

        }

        /* 表示已完成进度背景色 */

        progress::-webkit-progress-value {

            background: forestgreen;

            border-radius: 0.2rem;

        }

    </style>

</head>

<body>

<input type="file" id="myFile"/>

<div id="bar">

    上传进度:

    <progress id="pro" value="0"></progress>

</div>

<div>

    <img src="" alt="GG" id="myImg"/>

</div>

</body>

<script src="../js/jquery.js"></script>

<script>

    var myFile = document.getElementById("myFile");

    //绑定事件(ECMAScript6写法)

    myFile.addEventListener("change", () => {

        var file = myFile.files[0];

        //toDataURL(file);

        previewWithObjectURL(file);

    })

    //简单的图片预览建议使用第一种方式

    //URL方式（第一种方式）src = blob:http://localhost:8080/f720711f-57e2-428f-8a47-ec59e5dbbc10

    function previewWithObjectURL(file) {

        var url = URL.createObjectURL(file);

        var reader = new FileReader();

        reader.readAsDataURL(file);

        //请求完成后,显示图片

        reader.onloadend = function (event) {

            document.getElementById("myImg").src = url;

        }

        //上传过程中动态显示进度条

        reader.onprogress = function (event) {

            if (event.lengthComputable) {

                document.getElementById("pro").value = event.loaded / event.total;

            }

        }

    }

    //DataURL（第二种方式）src = data image/jpeg;base64,/hihfejaojshf24ji3h53i

    function toDataURL(file) {

        var reader = new FileReader();

        reader.readAsDataURL(file);

        //请求完成后,显示图片

        reader.onloadend = function (event) {

            document.getElementById("myImg").src = event.target.result;

        }

        //上传过程中动态显示进度条

        reader.onprogress = function (event) {

            if (event.lengthComputable) {

                document.getElementById("pro").value = event.loaded / event.total;

            }

        }

    }

</script>

</html>

js图片预览带进度条的更多相关文章

  1. js实现图片上传预览及进度条

    原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器<input type= ...

  2. js图片预览插件，不涉及上传

    小小的几十行代码,很牛逼,很实用. 支持多个图片的预览,只要new多个对象就行了. html如下 <!-- zhouxiang www.zhou-xiang.com --> <!DO ...

  3. previewImage.js图片预览缩放保存插件

    previewImage.js好用的图片预览缩放保存插件

  4. vue.js 图片预览

    Vue.js的图片预览的插件还是不少,但是找了半天还是没找到跟现在项目里能用得很顺手的,其实项目里图片预览功能很简单,点击放大,能双指缩放就可以了.部分vue.js的图片预览库都需要把图片资源单独拿出 ...

  5. js 图片预览

    图片预览 $('#pac_recipe').change(function() { var imgsrc = ''; ]) { //chrome firefox imgsrc = window.URL ...

  6. MVC 图片上传 带进度条（转）

    MVC 图片上传小试笔记 form.js 这个插件已经是很有名的,结合MVC的html辅助方法异步上传就很简单了.jQuery Form Plugin :http://www.malsup.com/j ...

  7. js图片预览（一张图片预览）

    核心思想:无论是一张图片上传还是多图上传,首先我们都需要先获得图片对象. 栗子: <inuput type="file" id="myfile" onch ...

  8. bootstarp 多图片上传 带进度条

    前台代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head&g ...

  9. 一般处理程序、Ajax多图片上传带进度条

    <!DOCTYPE html><html><head>    <meta charset="utf-8" />    <tit ...

随机推荐

  1. spring 通用mapper的一些注解

    1.1@Table 注解 注解作用:建立实体类和数据库表之间的对应关系.默认规则:实体类类名首字母小写作为表名.Employee 类→employee 表. 用法:在@Table 注解的 name 属 ...

  2. Tarjan-CV/BCC/SCC算法学习笔记

    DFS性质的应用--利用Tarjan算法求割顶.BCC.SCC 整理自<算法竞赛入门经典--训练指南>以及网络 DFS (depth first search)深度优先搜索算法 dfs森林 ...

  3. 对称加密实现重要日志上报Openresty接口服务

    记录后端接收日志的流程: 由于记录的是广告数据,单次计费数据都会上报,全国内约10几万终端上报. 终端上报:Android电视端Apk上报 接收终端:Openresty(Nginx+lua)利用ngi ...

  4. CVE-2018-10933 LibSSH auth bypass

    漏洞原理 认证实现错误, 认证分为多个步骤,可以直接跳到成功的步骤       A vulnerability was found in libssh's server-side state mach ...

  5. grep匹配命令

    关于匹配的实例: 统计所有包含“48”字符的行有多少行 grep -c "48" demo.txt   不区分大小写查找“May”所有的行) grep -i "May&q ...

  6. SpringBoot集成Druid实现监控

    application.properties文件完整信息 #连接数据库 spring.datasource.driver-class-name=org.mariadb.jdbc.Driver spri ...

  7. bzoj1458: 士兵占领（最大流）

    题目描述 有一个M * N的棋盘,有的格子是障碍.现在你要选择一些格子来放置一些士兵,一个格子里最多可以放置一个士兵,障碍格里不能放置士兵.我们称这些士兵占领了整个棋盘当满足第i行至少放置了Li个士兵 ...

  8. 置换的玩笑——DFS&&暴力

    题目 链接 题意:一个$1$到$n$的序列被去掉空格,需要将其还原.例如$4111109876532$可还原成$4 \ 1 \  11 \  10 \  9 \  8 \  7 \  6 \  5 \ ...

  9. html5shiv主要解决IE6-8 无法识别HTML5的新标签，父节点不能包裹子元素，以及应用CSS样式

    html5shivehtml5shiv主要IE6-8解决:1,HTML5提出的新的元素不被IE6-8识别.2,这些新元素不能作为父节点包裹子元素,3,并且不能应用CSS样式.让CSS 样式应用在未知元 ...

  10. ege图形库之动画排序

    老师布置了一个学习ege图形库来做动画排序的小动画程序,这是我自己做的效果.由于个人水平有限,可能代码有些地方可以改进.不足之处敬请指出. 注:要运行该代码需要正确配置,连接好ege图形库的头文件,做 ...