jquery和php上传文件进度条,jQuery实现带进度条文件上传（附代码）

这次给大家带来jQuery实现带进度条文件上传(附代码)，jQuery实现带进度条文件上传的注意事项有哪些，下面就是实战案例，一起来看一下。

运行效果截图如下：

具体代码如下：

upload

开始上传文件

关闭

确认

取消

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;

}

.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;

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;

background-color:#ccc;

cursor:wait;

}

.confirm{

margin-left:40%;

}

.cancel{

margin-left:10px;

}

jQuery代码：$(function (){

var $uploadSpan = $('.upload-span');

var $uploadMask = $('.upload-mask');

var $uploadContent = $('.upload-component');

var $closeConfirmCancel = $('.upload-close-span,.confirm,.cancel');

var $uploadTextSpan = $('.upload-text');

function showMask(){

$(".upload-mask,.upload-component").css({display:'block'});

progressBar();

$uploadSpan.off('click',showMask);

}

function hiddenMask(){

$uploadMask.css({display:'none'});

$uploadSpan.on('click',showMask);

}

function closeConfirmCancel(){

$uploadContent.css({display:'none'});

$uploadTextSpan.text('').next().css({width:0});

hiddenMask();

}

// 模拟进度

function progressBar(){

var max =100;

var init =0;

var uploaded;

var test = setInterval(function(){

init +=5;

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();

});

}

},1000);

}

$uploadSpan.on('click',showMask);

})

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：