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

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实现文件上传进度条,能显示上传的百分比等信息，内容就到这里了，希望大家能够喜欢。