时间:2021-07-01 10:21:17 帮助过:7人阅读
本文实例讲述了jQuery实现文件上传进度条效果的代码。分享给大家供大家参考。具体如下:
运行效果截图如下:
具体代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>upload</title> <link rel="stylesheet" type="text/css" href="upload/upload.css"> <script type="text/javascript" src="upload/jquery.js"></script> </head> <body> <span class="upload-span">开始上传文件</span> <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> <script type="text/javascript" src="upload/upload.js"></script> </body> </html>
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实现文件上传进度条,能显示上传的百分比等信息,内容就到这里了,希望大家能够喜欢。