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 相关文章推荐
AngularJs根据访问的页面动态加载Controller的解决方案
Feb 04 Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
Sep 06 Javascript
JavaScript接口的实现三种方式(推荐)
Jun 14 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
Jun 16 Javascript
AngularJS实现表单验证功能
Jan 09 Javascript
使用jQuery,Angular实现登录界面验证码详解
Apr 27 jQuery
Vue官网todoMVC示例代码
Jan 29 Javascript
Material(包括Material Icon)在Angular2中的使用详解
Feb 11 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
Feb 24 Javascript
vue 使某个组件不被 keep-alive 缓存的方法
Sep 21 Javascript
react如何快速设置文件路径别名
Apr 28 Javascript
vue实现列表拖拽排序的示例代码
Apr 08 Vue.js
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中在数据库中保存Checkbox数据(2)
2006/10/09 PHP
ThinkPHP3.1之D方法实例详解
2014/06/20 PHP
php 生成加密公钥加密私钥实例详解
2017/06/16 PHP
Input 特殊事件onpopertychange和oninput
2009/06/17 Javascript
jQuery代码优化 事件委托篇
2011/11/01 Javascript
JS实现点击按钮自动增加一个单元格的方法
2015/03/09 Javascript
js实现文字在按钮上滚动的方法
2015/08/20 Javascript
asp知识整理笔记3(问答模式)
2015/09/27 Javascript
使用RequireJS库加载JavaScript模块的实例教程
2016/06/06 Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
2016/09/17 Javascript
微信小程序 摇一摇抽奖简单实例实现代码
2017/01/09 Javascript
JS判断时间段的实现代码
2017/06/14 Javascript
详解在vue-cli项目中安装node-sass
2017/06/21 Javascript
jsonp跨域请求详解
2017/07/13 Javascript
vue-cli之router基本使用方法详解
2017/10/17 Javascript
JavaScript数据结构之双向链表定义与使用方法示例
2017/10/27 Javascript
webpack 样式加载的实现原理
2018/06/12 Javascript
JavaScript中常用的简洁高级技巧总结
2019/03/10 Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
2020/05/12 Javascript
微信小程序选择图片控件
2021/01/19 Javascript
python3使用SMTP发送HTML格式邮件
2018/06/19 Python
python使用adbapi实现MySQL数据库的异步存储
2019/03/19 Python
python获取全国城市pm2.5、臭氧等空气质量过程解析
2019/10/12 Python
TensorFlow内存管理bfc算法实例
2020/02/03 Python
使用Html5 Stream开发实时监控系统
2020/06/02 HTML / CSS
台湾生鲜宅配:大口市集
2017/10/14 全球购物
大学新生军训个人的自我评价
2013/10/03 职场文书
学院书画协会部门岗位职责
2013/12/01 职场文书
财务总监管理岗位职责
2014/03/08 职场文书
大学新闻系自荐书
2014/05/31 职场文书
2014年群众路线教育实践活动整改措施
2014/09/24 职场文书
大学生思想道德自我评价
2015/03/09 职场文书
2015年教学工作总结
2015/04/02 职场文书
成绩单家长意见
2015/06/03 职场文书
开业庆典嘉宾致辞
2015/08/01 职场文书
CSS3实现360度循环旋转功能
2022/02/12 HTML / CSS