jQuery實(shí)現(xiàn)簡(jiǎn)單的文件上傳進(jìn)度條效果

2019-11-20 11:13:16

字體：大中小

供稿：網(wǎng)友

本文實(shí)例講述了jQuery實(shí)現(xiàn)文件上傳進(jìn)度條效果的代碼。分享給大家供大家參考。具體如下：
運(yùn)行效果截圖如下：

具體代碼如下：

<!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">關(guān)閉</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">確認(rèn)</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();}// 模擬進(jìn)度f(wàn)unction 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實(shí)現(xiàn)文件上傳進(jìn)度條，能顯示上傳的百分比等信息，內(nèi)容就到這里了，希望大家能夠喜歡。

上一篇：Jquery Ajax Error 調(diào)試錯(cuò)誤的技巧

下一篇：jquery實(shí)現(xiàn)手風(fēng)琴效果