1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         progress {
  8.             width: 168px;
  9.             height: 5px;
  10.             color: #f00;
  11.             background: #EFEFF4;
  12.             border-radius: 0.1rem;
  13.         }
  14.  
  15.         /* 表示总长度背景色 */
  16.         progress::-webkit-progress-bar {
  17.             background-color: #f2f2f2;
  18.             border-radius: 0.2rem;
  19.         }
  20.  
  21.         /* 表示已完成进度背景色 */
  22.         progress::-webkit-progress-value {
  23.             background: forestgreen;
  24.             border-radius: 0.2rem;
  25.         }
  26.     </style>
  27. </head>
  28. <body>
  29. <input type="file" id="myFile"/>
  30. <div id="bar">
  31.     上传进度:
  32.     <progress id="pro" value="0"></progress>
  33. </div>
  34. <div>
  35.     <img src="" alt="GG" id="myImg"/>
  36. </div>
  37.  
  38. </body>
  39. <script src="../js/jquery.js"></script>
  40. <script>
  41.  
  42.     var myFile = document.getElementById("myFile");
  43.     //绑定事件(ECMAScript6写法)
  44.     myFile.addEventListener("change", () => {
  45.         var file = myFile.files[0];
  46.         //toDataURL(file);
  47.         previewWithObjectURL(file);
  48.     })
  49.  
  50.     //简单的图片预览建议使用第一种方式
  51.     //URL方式（第一种方式）src = blob:http://localhost:8080/f720711f-57e2-428f-8a47-ec59e5dbbc10
  52.     function previewWithObjectURL(file) {
  53.         var url = URL.createObjectURL(file);
  54.         var reader = new FileReader();
  55.         reader.readAsDataURL(file);
  56.         //请求完成后,显示图片
  57.         reader.onloadend = function (event) {
  58.             document.getElementById("myImg").src = url;
  59.         }
  60.         //上传过程中动态显示进度条
  61.         reader.onprogress = function (event) {
  62.             if (event.lengthComputable) {
  63.                 document.getElementById("pro").value = event.loaded / event.total;
  64.             }
  65.         }
  66.     }
  67.  
  68.     //DataURL（第二种方式）src = data image/jpeg;base64,/hihfejaojshf24ji3h53i
  69.     function toDataURL(file) {
  70.         var reader = new FileReader();
  71.         reader.readAsDataURL(file);
  72.         //请求完成后,显示图片
  73.         reader.onloadend = function (event) {
  74.             document.getElementById("myImg").src = event.target.result;
  75.         }
  76.         //上传过程中动态显示进度条
  77.         reader.onprogress = function (event) {
  78.             if (event.lengthComputable) {
  79.                 document.getElementById("pro").value = event.loaded / event.total;
  80.             }
  81.         }
  82.     }
  83. </script>
  84. </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. Apache版本兼容性问题

    Apache 版本2.2.31 版本对于谷歌浏览器不兼容.IE8版本可以正常使用 当使用了Apache 高版本的话就解决了 出现以下现象

  2. bind9+dlz+mysql连接断开问题

    前言 关于bind-dlz介绍:http://bind-dlz.sourceforge.net/ DLZ(Dynamically Loadable Zones)与传统的BIND9不同,BIND的不足之 ...

  3. P5650 基础字符串练习题

    设定'0'权值为1,设定'1'权值为-1 然后就是最大子段和 #include <cstdio> #include <algorithm> #include <cstri ...

  4. [TJOI2019]唱、跳、rap和篮球——容斥原理+生成函数

    先附一组sd图 然后放上原题链接 注意,队伍不同指的是喜好不同,不是人不同 先想到\(DP\),然后你会发现并没有什么优秀的状态设计,然后我们考虑容斥 设\(lim\)表示选的癌坤组数的上限,\(f_ ...

  5. RabbitMQ与Spring集成配置

    1.引入相关jar包 //RabbitMQ compile group: 'org.springframework.amqp', name: 'spring-rabbit', version: '1. ...

  6. npm 镜像地址配置

    1.查询当前镜像地址 npm get registry 2.修改镜像地址 npm config set registry http://registry.npm.taobao.org/ 原始镜像地址( ...

  7. POI读取格式化后的单元格数据

    public static String getFormattedValue(Cell cell) { FormulaEvaluator evaluator = cell.getSheet().get ...

  8. JavaScript程序设计——FOR循环

    FOR循环流程图: 1.编写求6!的阶乘的代码 2.编写10个10相加的和 3.编写1+2+3+...+10连续相加的和 4.编写1+(1+2)+(1+2+3)+...+(1+2+3+...+10)连 ...

  9. 几个不同的关键XPath概念

    几个不同的关键XPath概念...... 绝对vs相对XPath(/vs .) / 引入绝对位置路径,从文档的根开始. . 从上下文节点开始引入相对位置路径. 命名元素vs任何元素(enamevs * ...

  10. effective c++ （四）

    条款10:令operator=返回一个reference to *this 为了实现“连锁赋值”,赋值操作符必须返回一个reference指向操作符的左侧实参,这是你为classes实现赋值操作符时应 ...