jQuery实现文件上传进度条特效


Posted in Javascript onAugust 12, 2015

上传进度条通常是由前面jquery加后端了脚本器脚本来实现了,今天我们介绍的是一款基本php+jQuery实现文件上传进度条效果的例子,具体细节如下。

最近呢,一个项目做一个进度条的效果出来,这个之前还真没做过。刚好这周没什么东西了,就拿这个来充一下数吧。

文件上传,得先准备一个“按钮”:

jQuery实现文件上传进度条特效

这个看上去还是不错的吧,实现也是很简单的:

<span class="upload-span">开始上传文件</span>
<button>太丑了,就用span来做了,可控性强。添加点css:
.upload-span{
  display: inline-block;
  width: 120px;
  height: 40px;
  color: #FFFFFF;
  text-align: center;
  line-height: 40px;
  background-color: blue;
  border: 2px solid blue;
  border-radius:5px;
  cursor: pointer;
  letter-spacing: 2px;
}

当点击就会触发上传效果,之后添加事件。
逼真一点,得再加一个遮罩和一个显示进度条的控件,点击span后,效果大概是这样子的:

jQuery实现文件上传进度条特效

<div class="upload-mask"></div>
  <div class="upload-component">
    <div class="upload-close">
      <span class="upload-close-span">关闭</span>
    </div>
    <div class="upload-content">
      <div class="progress">
        <span class="upload-text"></span>
        <span class="uploaded"></span>
      </div>
      <div class="confirm-cancel">
        <span class="confirm">确认</span>
        <span class="cancel">取消</span>
      </div>
    </div>
  </div>

加点css上去:

.upload-mask{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9;
  width: 100%;
  height: 100%;
  background-color: rgba(84,84,84,0.3);
  display: none;
}
.upload-component{
  position: absolute;
  z-index: 99;
  top: 50%;
  left: 50%;
  margin-left: -120px;
  margin-top: -60px;
  width: 240px;
  height: 120px;
  background-color: #FFFFFF;
  display:none;
}
.upload-close{
  position: relative;
  height: 30px;
  background-color: rgb(234,234,234);
}
.upload-close span{
  position: absolute;
  right: 15px;
  line-height: 30px;
  cursor: pointer;
}
.upload-content,.confirm-cancel{
  margin-top: 15px;
}
.progress{
  position:relative;
  width:90%;
  height:22px;
  margin-left: 4.88888%;
  text-align: center;
  line-height: 22px;
  /*background-color: blue;*/
  border:1px solid #ccc;
}
.upload-text{
  position:absolute;
  z-index: 99999;
  color:red;
}
.uploaded{
  position:absolute;
  left:0;
  z-index: 9999;
  width:0%;
  height:100%;
  background-color: blue;
  color:#FFFFFF;
}
.confirm-cancel span{
  display:inline-block;
  width:60px;
  height:30px;
  line-height: 30px;
  text-align: center;
  /*cursor:pointer;*/
  background-color:#ccc;
  cursor:wait;
}
.confirm{
  /*background-color: rgb(111,197,293);*/
  margin-left:40%;
}
.cancel{
  /*background-color: rgb(175,194,211);*/
  margin-left: 10px;
}

为了模拟进度的显示,在这里用了两个span:

<div class="progress">
  <span class="upload-text"></span>
  <span class="uploaded"></span>
</div>

上面一个是用来显示百分比的,下面一个用来填色的:

.upload-text{
  position:absolute;
  z-index: 99999;
  color:red;
}
.uploaded{
  position:absolute;
  left:0;
  z-index: 9999;
  width:0%;
  height:100%;
  background-color: blue;
  color:#FFFFFF;
}

为了逼真,给填色的span设置背景色,其宽度就是进度的百分比,最后就用js来模拟进度的变化了:

// 模拟进度
  function progressBar() {
    var max = 100;
    var init = 0;
    var uploaded;
    var test = setInterval(function() {
      init += 10;
      uploaded = parseInt((init / max * 100)) + '%';
      $uploadTextSpan.text(uploaded).next().css({
  width:uploaded
  });
  if (init === 100) {
  clearInterval(test);
  $uploadTextSpan.text('上传完成');
  $('.confirm-cancel span').css({
   cursor:'pointer'
  });
  $('.confirm').css({
   backgroundColor:'rgb(111,197,293)'
  });
  $('.cancel').css({
   backgroundColor:'rgb(175,194,211)'
  })
  $closeConfirmCancel.on('click',closeConfirmCancel);
  } 
  else { 
  $closeConfirmCancel.off('click',closeConfirmCancel);
  $('.upload-close-span').on('click',function(){
   clearInterval(test);
   closeConfirmCancel();
  });
  $uploadMask.on('click',function() {
          clearInterval(test);
          closeConfirmCancel();
        })
      }
    },1000);
  }

JQuery实现文件上传进度条,能显示上传的百分比等信息,内容就到这里了,希望大家能够喜欢。

Javascript 相关文章推荐
javascript 程序库的比较(一)之DOM功能
Apr 07 Javascript
input输入框的自动匹配(原生代码)
Mar 19 Javascript
JQuery实现绚丽的横向下拉菜单
Dec 19 Javascript
我的Node.js学习之路(一)
Jul 06 Javascript
详解Bootstrap插件
Apr 25 Javascript
AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
Jan 19 Javascript
详解JavaScript中的六种错误类型
Sep 21 Javascript
JS实现的找零张数最小问题示例
Nov 28 Javascript
js实现敏感词过滤算法及实现逻辑
Jul 24 Javascript
JS解惑之Object中的key是有序的么
May 06 Javascript
vue3.0 搭建项目总结(详细步骤)
May 20 Javascript
vue iview多张图片大图预览、缩放翻转
Jul 13 Javascript
XML文件转化成NSData对象的方法
Aug 12 #Javascript
javascript实现点击单选按钮链接转向对应网址的方法
Aug 12 #Javascript
jQuery实现动态添加和删除一个div
Aug 12 #Javascript
JavaScript多线程详解
Aug 12 #Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
Aug 12 #Javascript
JavaScript实现同一页面内两个表单互相传值的方法
Aug 12 #Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
Aug 12 #Javascript
You might like
PHP安全配置
2006/12/06 PHP
ThinkPHP写第一个模块应用
2012/02/20 PHP
多个PHP中文字符串截取函数
2013/11/12 PHP
php绘制一条弧线的方法
2015/01/24 PHP
Laravel 中使用 Vue.js 实现基于 Ajax 的表单提交错误验证操作
2017/06/30 PHP
laravel 验证错误信息到 blade模板的方法
2019/09/29 PHP
原生javascript实现图片按钮切换
2015/01/12 Javascript
JavaScript ParseFloat()方法
2015/12/18 Javascript
js方法数据验证的简单实例
2016/09/17 Javascript
canvas实现粒子时钟效果
2017/02/06 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
2017/02/26 Javascript
jquery实现的table排序功能示例
2017/03/10 Javascript
vue-cli+webpack记事本项目创建
2017/04/01 Javascript
微信小程序 chooseImage选择图片或者拍照
2017/04/07 Javascript
Angular中使用$watch监听object属性值的变化(详解)
2017/04/24 Javascript
vue2 中如何实现动态表单增删改查实例
2017/06/09 Javascript
vue路由懒加载的实现方法
2018/03/12 Javascript
vue.js实现h5机器人聊天(测试版)
2020/07/16 Javascript
[00:44]华丽开场!DOTA2勇士令状带来全新对阵画面
2019/05/15 DOTA
[47:04]EG vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python标准库之随机数 (math包、random包)介绍
2014/11/25 Python
详解Python程序与服务器连接的WSGI接口
2015/04/29 Python
python魔法方法-属性转换和类的表示详解
2016/07/22 Python
解决django后台样式丢失,css资源加载失败的问题
2019/06/11 Python
在python中利用try..except来代替if..else的用法
2019/12/19 Python
Python是什么 Python的用处
2020/05/26 Python
python学习将数据写入文件并保存方法
2020/06/07 Python
Python faker生成器生成虚拟数据代码实例
2020/07/20 Python
俄罗斯女装店:12storeez
2019/10/25 全球购物
优秀学生评语大全
2014/04/25 职场文书
镇党委书记群众路线整改措施思想汇报
2014/10/13 职场文书
小学生优秀评语
2014/12/29 职场文书
2015年乡镇信访工作总结
2015/04/07 职场文书
文艺部部长竞选稿
2015/11/21 职场文书
浅谈Python数学建模之整数规划
2021/06/23 Python
Java数据结构之堆(优先队列)
2022/05/20 Java/Android