效果：（点击上传按钮）

See the Pen pjGNJr by moyu (@MoYu1991) on CodePen.

html代码：

 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>upload</title>
  6. <link rel="stylesheet" type="text/css" href="upload/upload.css">
  7. <script type="text/javascript" src="upload/jquery.js"></script>
  8. </head>
  9. <body>
  10. <span class="upload-span">开始上传文件</span>
  11. <div class="upload-mask"></div>
  12. <div class="upload-component">
  13. <div class="upload-close">
  14. <span class="upload-close-span">关闭</span>
  15. </div>
  16. <div class="upload-content">
  17. <div class="progress">
  18. <span class="upload-text"></span>
  19. <span class="uploaded"></span>
  20. </div>
  21. <div class="confirm-cancel">
  22. <span class="confirm">确认</span>
  23. <span class="cancel">取消</span>
  24. </div>
  25. </div>
  26. </div>
  27. <script type="text/javascript" src="upload/upload.js"></script>
  28. </body>
  29. </html>
 
CSS代码：
 
  1. .upload-span{
  2. display:inline-block;
  3. width:120px;
  4. height:40px;
  5. color:#FFFFFF;
  6. text-align: center;
  7. line-height:40px;
  8. background-color: blue;
  9. border:2px solid blue;
  10. border-radius:5px;
  11. cursor: pointer;
  12. letter-spacing:2px;
  13. }
  14. .upload-mask{
  15. position: absolute;
  16. top:0;
  17. left:0;
  18. z-index:9;
  19. width:100%;
  20. height:100%;
  21. background-color: rgba(84,84,84,0.3);
  22. display: none;
  23. }
  24. .upload-component{
  25. position: absolute;
  26. z-index:99;
  27. top:50%;
  28. left:50%;
  29. margin-left:-120px;
  30. margin-top:-60px;
  31. width:240px;
  32. height:120px;
  33. background-color:#FFFFFF;
  34. display:none;
  35. }
  36. .upload-close{
  37. position: relative;
  38. height:30px;
  39. background-color: rgb(234,234,234);
  40. }
  41. .upload-close span{
  42. position: absolute;
  43. right:15px;
  44. line-height:30px;
  45. cursor: pointer;
  46. }
  47. .upload-content,.confirm-cancel{
  48. margin-top:15px;
  49. }
  50. .progress{
  51. position:relative;
  52. width:90%;
  53. height:22px;
  54. margin-left:4.88888%;
  55. text-align: center;
  56. line-height:22px;
  57. border:1px solid #ccc;
  58. }
  59. .upload-text{
  60. position:absolute;
  61. z-index:99999;
  62. color:red;
  63. }
  64. .uploaded{
  65. position:absolute;
  66. left:0;
  67. z-index:9999;
  68. width:0%;
  69. height:100%;
  70. background-color: blue;
  71. color:#FFFFFF;
  72. }
  73. .confirm-cancel span{
  74. display:inline-block;
  75. width:60px;
  76. height:30px;
  77. line-height:30px;
  78. text-align: center;
  80. background-color:#ccc;
  81. cursor:wait;
  82. }
  83. .confirm{
  85. margin-left:40%;
  86. }
  87. .cancel{
  89. margin-left:10px;
  90. }
 
jQuery代码：
 
  1. $(function (){
  3. var $uploadSpan = $('.upload-span');
  4. var $uploadMask = $('.upload-mask');
  5. var $uploadContent = $('.upload-component');
  6. var $closeConfirmCancel = $('.upload-close-span,.confirm,.cancel');
  7. var $uploadTextSpan = $('.upload-text');
  9. function showMask(){
  10. $(".upload-mask,.upload-component").css({display:'block'});
  11. progressBar();
  12. $uploadSpan.off('click',showMask);
  13. }
  15. function hiddenMask(){
  16. $uploadMask.css({display:'none'});
  17. $uploadSpan.on('click',showMask);
  18. }
  20. function closeConfirmCancel(){
  21. $uploadContent.css({display:'none'});
  22. $uploadTextSpan.text('').next().css({width:0});
  23. hiddenMask();
  24. }
  26. // 模拟进度
  27. function progressBar(){
  28. var max =100;
  29. var init =0;
  30. var uploaded;
  31. var test = setInterval(function(){
  32. init +=5;
  33. uploaded = parseInt(init / max *100)+'%';
  34. $uploadTextSpan.text(uploaded).next().css({width:uploaded});
  35. if(init ===100){
  36. clearInterval(test);
  37. $uploadTextSpan.text('上传完成');
  38. $('.confirm-cancel span').css({cursor:'pointer'});
  39. $('.confirm').css({backgroundColor:'rgb(111,197,293)'});
  40. $('.cancel').css({backgroundColor:'rgb(175,194,211)'})
  41. $closeConfirmCancel.on('click',closeConfirmCancel);
  42. }
  43. else{
  45. $closeConfirmCancel.off('click',closeConfirmCancel);
  46. $('.upload-close-span').on('click',function(){
  47. clearInterval(test);
  48. closeConfirmCancel();
  49. });
  51. }
  52. },1000);
  53. }
  55. $uploadSpan.on('click',showMask);
  57. })
 

jQuery实现上传进度条效果的更多相关文章

  1. JS框架_(JQuery.js)上传进度条

    百度云盘 传送门 密码: 1pou 纯CSS上传进度条效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...

  2. jQuery文件上传插件jQuery Upload File 有上传进度条

    jQuery文件上传插件jQuery Upload File 有上传进度条 jQuery文件上传插件jQuery Upload File,插件使用简单,支持单文件和多文件上传,支持文件拖拽上传,有进度 ...

  3. HTML5矢量实现文件上传进度条

    在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件 ...

  4. 基于HT for Web矢量实现HTML5文件上传进度条

    在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件 ...

  5. PHP中使用Session配合Javascript实现文件上传进度条功能

    Web应用中常需要提供文件上传的功能.典型的场景包括用户头像上传.相册图片上传等.当需要上传的文件比较大的时候,提供一个显示上传进度的进度条就很有必要了. 在PHP .4以前,实现这样的进度条并不容易 ...

  6. spring定时任务-文件上传进度条

    spring定时任务 导依赖 <!-- https://mvnrepository.com/artifact/org.quartz-scheduler/quartz --> <dep ...

  7. Java 单文件、多文件上传 / 实现上传进度条

    博客地址:https://ainyi.com/76 日常,工作 在这里总结一下上传吧(是以前做过的练习,就汇总到个人博客吧) java ssm 框架实现文件上传 实现:单文件上传.多文件上传(单选和多 ...

  8. 创建一个jQuery UI的垂直进度条效果

    日期:2013-9-24  来源:GBin1.com 在线演示 缺省的jQuery UI只有水平的进度条效果,没有垂直的进度条效果,仅仅重新定义JQuery UI的CSS不能解决这个问题. 这里我们扩 ...

  9. iOS_文件上传进度条的实现思路-AFNettworking

    iOS_文件上传进度条的实现思路-AFNettworking //要上传的文件名,在这里我使用当前日期做为文件的名称 NSString * fileName =[NSString stringWith ...

随机推荐

  1. 《windows核心编程系列》十五谈谈windows线程栈

    谈谈windows线程栈. 当系统创建线程时会为线程预订一块地址空间区域,注意仅仅是预订.默认情况下预定的这块区域的大小是1MB,虽然预订这么多,但是系统并不会给全部区域调拨物理存储器.默认情况下,仅 ...

  2. [Usaco2008 Dec]Patting Heads 轻拍牛头

    Description 今天是贝茜的生日,为了庆祝自己的生日,贝茜邀你来玩一个游戏． 贝茜让N(1≤N≤100000)头奶牛坐成一个圈．除了1号与N号奶牛外,i号奶牛与i-l号和i+l号奶牛相邻．N号 ...

  3. _bzoj1015 [JSOI2008]星球大战starwar【并查集】

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=1015 倒过来做就ok了. #include <cstdio> #include ...

  4. [ZPG TEST 108] blockenemy【树形dp】

    T3:blockenemy blockenemy.pas/in/out 128M 1s 你在玩电子游戏的时候遇到了麻烦...... 你玩的游戏是在一个虚拟的城市里进行,这个城市里有n个点,都从0~n- ...

  5. 动态规划：最大连续子序列乘积 分类： c/c++ 算法 2014-09-30 17:03 656人阅读 评论(0) 收藏

    题目描述: 给定一个浮点数序列(可能有正数.0和负数),求出一个最大的连续子序列乘积. 分析:若暴力求解,需要O(n^3)时间,太低效,故使用动态规划. 设data[i]:第i个数据,dp[i]:以第 ...

  6. 转】Spark SQL 之 DataFrame

    原博文出自于: http://www.cnblogs.com/BYRans/p/5003029.html 感谢! Spark SQL 之 DataFrame 转载请注明出处:http://www.cn ...

  7. iOS 中集成海康威视 摄像视频

    本文原文地址  http://www.cnblogs.com/qianLL/p/6652104.html 一.要导入相关的库,注意 这里比较坑的是 要用和他一样的 如果开始的工程中用了AFN或者MJE ...

  8. .NET 之ViewState的本质

    ViewState是如何实现这些功能. 以名值对的方式来存控件的值,和Hashtable的结构类似: 跟踪那些ViewState中出现改变的值,以便对这些脏数据(dirty)进行进一步的处理: 通过序 ...

  9. 【Python】高级函数

    1.Filter函数 def is_odd(x): return x % 2 == 1 #将列表中所有的奇数筛选出来 print(list(filter(is_odd,[1,2,3,4,5,6,7]) ...

  10. 轻松搞定Spring+quartz的定时任务

    1.spring 的定时任务写法有两种:一种是继承工作类,一种是普通的Bean,定时写法有两种写法:一种是以时间间隔启动任务SimpleTriggerBean,一种是以时刻启动任务CronTrigge ...