<!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. javascript弹出带文字信息的提示框效果

    // position of the tooltip relative to the mouse in pixel // <html><head><meta charse ...

  2. Beego框架POST请求接收JSON数据

    原文: https://blog.csdn.net/Aaron_80726/article/details/83870563 ------------------------------------- ...

  3. rac 数组之遍历

    rac的数组遍历其实很简单.但是有个点需要注意. 以下先举个例子说明遍历的用法 NSArray *temArr = @["]; [temArr.rac_sequence.signal sub ...

  4. BZOJ 3514: Codechef MARCH14 GERALD07加强版 (LCT维护最大生成树+主席树)

    题意 给出nnn个点,mmm条边.多次询问,求编号在[l,r][l,r][l,r]内的边形成的联通块的数量,强制在线. 分析 LCTLCTLCT维护动态最大生成树,先将每条边依次加进去,若形成环就断掉 ...

  5. Codeforces Round #453 (Div. 1) 901C C. Bipartite Segments

    题 http://codeforces.com/contest/901/problem/C codeforces 901C 解 首先因为图中没有偶数长度的环,所以: 1.图中的环长度全是奇数,也就是说 ...

  6. C和汇编混联合的问题

    关键时刻出现了问题: 关于packed的问题,一定要注意这个问题http://stackoverflow.com/questions/4306186/structure-padding-and-str ...

  7. mounted里面this.$refs.xxx的内容是undefined

    在mounted(){}钩子里面使用this.$refs.xxx,打印出来的却是undefined? DOM结构已经渲染出来了,但是如果在DOM结构中的某个DOM节点使用了v-if.v-show或者v ...

  8. ie浏览器中时间转换

    var begintime = $("#start").val(); var lastLoginTimeStart =new Date(begintime).getTime();/ ...

  9. 【maven】【spring boot】【单元测试】 使用controller 执行单元测试类

    存在这样一个场景: 当项目启动时间过长,又没办法缩短的时候,写单元测试就是一个十分耗时的工作, 这工作不在于使用编写代码,而在于每次run junit test 都需要完整启动一次项目,白白浪费宝贵的 ...

  10. ORACLE表名与列名小写转成大写

    批量将表名变为大写 begin for c in (select table_name tn from user_tables where table_name <> upper(tabl ...