<!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. web开发：形变、表格及多行文本操作

    一.2d形变 二.动画 三.表格 四.多个文本垂直居中 五.小米形变案例 一.2d形变 /*1.形变参考点: 三轴交界点*/transform-origin: x轴坐标 y轴坐标; /*2.旋转 ro ...

  2. Spring入门篇——第5章 Spring AOP基本概念

    第5章 Spring AOP基本概念 本章介绍Spring中AOP的基本概念和应用. 5-1 AOP基本概念及特点 5-2 配置切面aspect ref:引用另外一个Bean 5-3 配置切入点Poi ...

  3. invalid argument "type=bind,source=/tmp/tfserving/serving/tensorflow_serving/servables/tensorflow/testdata/saved_model_half_plus_two_cpu," for "--mount" flag: invalid field '' must be a key=value pair

    --mount参数后面不要有空格 空格去掉即可

  4. SimpleDateFormat线程不安全及解决办法(转)

    以前没有注意到SimpleDateFormat线程不安全的问题,写时间工具类,一般写成静态的成员变量,不知,此种写法的危险性!在此讨论一下SimpleDateFormat线程不安全问题,以及解决方法. ...

  5. 洛谷P1436 棋盘分割

    洛谷题目链接 动态规划: 我们设状态$f[i][j][o][p][k]$表示一个矩形,左上角顶点坐标为$(i,j)$,右下角顶点坐标为$(o,p)$时分割了$k$次,也就是说现在是$k+1$块 我们考 ...

  6. [JSOI 2016] 最佳团体（树形背包+01分数规划）

    4753: [Jsoi2016]最佳团体 Time Limit: 20 Sec  Memory Limit: 512 MBSubmit: 2003  Solved: 790[Submit][Statu ...

  7. python 正则相关函数全解析

    前言:网上有很多关于python正则函数的方法说明,这里尽可能用最简单的demo把所有函数之间的逻辑关系说清楚,供参考. 1.最原始的 re.compile()这个函数一般是需要和其它函数一起使用的, ...

  8. python 鼠标输入

    import win32con import win32api import time win32api.SetCursorPos([,]) # 设置鼠标位置 time.sleep(0.1) #win ...

  9. CF1207A

    CF1207A-There Are Two Types Of Burgers 题意: 出售普通汉堡和鸡肉汉堡,并且两种汉堡所需的原材料价格不同,问最多能卖多少钱. 解法: 对于这道题,我们优先考虑先卖 ...

  10. Liunx反弹shell的几种方式

    什么是反弹shell? 简单理解,通常是我们主动发起请求,去访问服务器(某个IP的某个端口),比如我们常访问的web服务器:http(https)://ip:80,这是因为在服务器上面开启了80端口的 ...