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