运行效果截图如下：
具体代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>upload</title> <link type="text/css" href="https://www.jb51.net/upload/upload.css"> <script type="text/javascript" src="https://www.jb51.net/upload/jquery.js"></script> </head> <body> <span>开始上传文件</span> <div></div> <div> <div> <span>关闭</span> </div> <div> <div> <span></span> <span></span> </div> <div> <span>确认</span> <span>取消</span> </div> </div> </div> <script type="text/javascript" src="https://www.jb51.net/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实现文件上传进度条，能显示上传的百分比等信息，内容就到这里了，希望大家能够喜欢。
您可能感兴趣的文章: