这次给大家带来jQuery实现带进度条文件上传(附代码),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> <p class="upload-mask"></p> <p class="upload-component"> <p class="upload-close"> <span class="upload-close-span">关闭</span> </p> <p class="upload-content"> <p class="progress"> <span class="upload-text"></span> <span class="uploaded"></span> </p> <p class="confirm-cancel"> <span class="confirm">确认</span> <span class="cancel">取消</span> </p> </p> </p> <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); })
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
以上是jQuery实现带进度条文件上传(附代码)的详细内容。更多信息请关注PHP中文网其他相关文章!