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 相关文章推荐
不使用中间变量,交换int型的 a, b两个变量的值。
Oct 29 Javascript
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
Jul 26 Javascript
jquery自定义类似$.ajax()的方法实现代码
Aug 13 Javascript
JS实现AES加密并与PHP互通的方法分析
Apr 19 Javascript
详解用vue.js和laravel实现微信授权登陆
Jun 23 Javascript
解决vue.js在编写过程中出现空格不规范报错的问题
Sep 20 Javascript
微信小程序自定义对话框弹出和隐藏动画
Jul 19 Javascript
vue+vue-router转场动画的实例代码
Sep 01 Javascript
jQuery easyui datagird编辑行删除行功能的实现代码
Sep 20 jQuery
利用d3.js力导布局绘制资源拓扑图实例教程
Jan 08 Javascript
vue如何使用async、await实现同步请求
Dec 09 Javascript
JavaScript实现栈结构详细过程
Dec 06 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
window+nginx+php环境配置 附配置搭配说明
2010/12/29 PHP
PHP 将dataurl转成图片image方法总结
2016/10/14 PHP
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
2010/03/11 Javascript
读取input:file的路径并显示本地图片的方法
2013/09/23 Javascript
js加入收藏以及使用Jquery更改透明度
2014/01/26 Javascript
js 实现浏览历史记录示例
2014/04/20 Javascript
用js替换除数字与逗号以外的所有字符的代码
2014/06/07 Javascript
JSON取值前判断
2014/12/23 Javascript
javascript与css3动画结合使用小结
2015/03/11 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
2015/09/09 Javascript
jQuery Easyui实现左右布局
2016/01/26 Javascript
关于vue.js弹窗组件的知识点总结
2016/09/11 Javascript
js使用i18n实现页面国际化的方法
2017/05/09 Javascript
收藏AngularJS中最重要的核心功能
2017/07/09 Javascript
详解使用vuex进行菜单管理
2017/12/21 Javascript
Node.js 如何利用异步提升任务处理速度
2019/01/07 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
2020/03/08 Javascript
Vue项目移动端滚动穿透问题的实现
2020/05/19 Javascript
[41:41]TFT vs Secret Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
Python交换变量
2008/09/06 Python
Python实现从百度API获取天气的方法
2015/03/11 Python
matplotlib作图添加表格实例代码
2018/01/23 Python
使用python装饰器计算函数运行时间的实例
2018/04/21 Python
对Python3中bytes和HexStr之间的转换详解
2018/12/04 Python
pycharm修改文件的默认打开方式的步骤
2019/07/29 Python
使用Tensorboard工具查看Loss损失率
2020/02/15 Python
PHP如何去执行一个SQL语句
2016/03/05 面试题
司法建议书范文
2014/05/13 职场文书
企业读书活动总结
2014/06/30 职场文书
竞选班长演讲稿400字
2014/08/22 职场文书
学生会竞选演讲稿纪检部
2014/08/25 职场文书
赔偿协议书范本
2014/09/12 职场文书
2014年无财产无子女离婚协议书范本
2014/10/09 职场文书
培训后的感想
2015/08/07 职场文书
SpringDataJPA在Entity中常用的注解介绍
2021/12/06 Java/Android
一文搞懂PHP中的抽象类和接口
2022/05/25 PHP