<!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. MySQL中DATA类型数据和DATATIME类型数据的比较

    在网上大题查了下这个问题,网上有的人说可以直接比较,并给出了测试用例,也有的人说不能比较,于是我自己尝试了一下,实际测试是可以的,不过,当传入DATA类型时间与DATATIME类型时间进行比较的时候, ...

  2. Tomcat conf/server.xml 配置项详解

    本文参考来源:https://blog.csdn.net/a314368439/article/details/60132783# <Server port="8005" s ...

  3. Mac安装chromedriver和geckodriver

    DY@MacBook-Pro bin$brew install chromedriver Error: No available formula with the name "chromed ...

  4. TBDR下msaa 在metal vulkan和ogles的解决方案

    https://developer.arm.com/solutions/graphics/developer-guides/understanding-render-passes/multi-samp ...

  5. 2018-2019 ACM-ICPC Nordic Collegiate Programming Contest (NCPC 2018) A. Altruistic Amphibians （DP）

    题目链接:https://codeforc.es/gym/101933/problem/A 题意:有 n 只青蛙在一个坑里面,要求可以跳出坑的青蛙的最大数量.每个青蛙有 3 种属性:l 为青蛙一次可以 ...

  6. Codeforces Round #591 (Div. 2, based on Technocup 2020 Elimination Round 1) C. Save the Nature

    链接: https://codeforces.com/contest/1241/problem/C 题意: You are an environmental activist at heart but ...

  7. Mysql数据库多对多关系未建新表

    原则上,多对多关系是要新建一个关系表的,当遇到没有新建表的情况下如何查询多对多的SQL呢? FIND_IN_SET(str,strlist) 官网:http://dev.mysql.com/doc/r ...

  8. 装饰者模式（Decorator）---结构型

    1 基础知识 定义:在不改变原有对象的基础上,将功能附加到对象上即动态地给一个对象添加一些额外的职责.特征:提供了比继承更有弹性的替代方案. 本质:动态组合. 使用场景:扩展一个类的功能或给一个类添加 ...

  9. Laravel学习笔记之PHP反射(Reflection) (上)

    Laravel学习笔记之PHP反射(Reflection) (上) laravel php reflect 2.1k 次阅读  ·  读完需要 80 分钟 3 说明:Laravel中经常使用PHP的反 ...

  10. 洛谷 P2832 行路难

    题面 这个最短路有点special,会有疲劳度的加成效应,这个时候应该怎么办呢? 难就难在,如果走一条路比另一条路长,但是用的边少,那么这条路并不一定就更差. 我们要是能解决这个问题,就可以做出本题. ...