<!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. 初级文件IO——若干种文件共享操作 如何影响 文件文件描述符表

    同一进程共享操作相同的文件 在同一个进程中多次open打开同一文件时,文件描述符可能会相同吗? 答:不可能.在同一进程里面,一旦某个文件描述符被用了,在close释放之前,别人不可能使用,所以指向同一 ...

  2. List.ForEach批量新增并发异常解决

    批量新增操作在业务系统中十分常见,尤其是主从表中对从表的批量处理.昨天在对wms主从表进行业务操作时使用了c#中list自带的函数ForEach对从表批量新增,代码如下: 在无并发的情况下接口请求正常 ...

  3. DX12 开debuggerlayer

    https://social.technet.microsoft.com/Forums/azure/en-US/ef10f8eb-fee0-4cde-bb01-52d1db2ea347/win10-1 ...

  4. UVALive 6858——分类讨论&&水题

    题目 链接 题意:对于一个$n \times m$的矩阵的最外一圈,问是否能用$k \times 1$的方块填满 分析 考虑左右两边的情况,分类讨论,切记考虑所有可能的情形. #include< ...

  5. WINCE7 SYMBOL MC32N0 SDK，VS2008调试程序，连接设备时，出现bootstrap 未能加载时

    开发工具:visual studio 2008 手持设备: SYMBOL  MC32NO工具->连接到设备->WINCE 7.00连接设备出现bootstrap 未能加载时,试下安装Mot ...

  6. 题解 [CF961G] Partitions

    题面 解析 首先我们观察这个定义, 可以发现每个元素在统计答案时是平等的, 也就是单个元素的权值对答案没有特别的影响. 设元素权值为\(w[i]\), 那么我们就可以知道答案是\(\sum_{i=1} ...

  7. 015_linuxC++之_覆写

    34.类成员函数的重载.覆盖和隐藏区别?答案:a.成员函数被重载的特征:(1)相同的范围(在同一个类中):(2)函数名字相同:(3)参数不同:(4)virtual 关键字可有可无.b.覆盖是指派生类函 ...

  8. Hdu Bomb(数位DP)

    Bomb Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/65536 K (Java/Others) Total Submiss ...

  9. Codevs 2482 宝库通道 2007年省队选拔赛安徽

    2482 宝库通道 2007年省队选拔赛安徽 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 大师 Master 题目描述 Description 探宝的旅程仍然继续中,由于你的帮助 ...

  10. 阿里云Ubuntu安装Composer和中国镜像

    引用: Composer是PHP用来管理依赖(dependency)关系的工具.你可以在自己的项目中声明所依赖的外部工具库(libraries),Composer 会帮你安装这些依赖的库文件. PHP ...