上傳進度條通常是由前面jquery加后端了腳本器腳本來實現(xiàn)了，今天我們介紹的是一款基本php+jQuery實現(xiàn)文件上傳進度條效果的例子，具體細節(jié)如下。
最近呢，一個項目做一個進度條的效果出來，這個之前還真沒做過。剛好這周沒什么東西了，就拿這個來充一下數(shù)吧。
文件上傳，得先準備一個“按鈕”：
這個看上去還是不錯的吧，實現(xiàn)也是很簡單的：
<span class="upload-span">開始上傳文件</span><button>太丑了，就用span來做了，可控性強。添加點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;}當點擊就會觸發(fā)上傳效果，之后添加事件。
逼真一點，得再加一個遮罩和一個顯示進度條的控件，點擊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">確認</span> <span class="cancel">取消</span> </div> </div> </div>
加點css上去：
.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; /*background-color: blue;*/ 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; /*cursor:pointer;*/ background-color:#ccc; cursor:wait;}.confirm{ /*background-color: rgb(111,197,293);*/ margin-left:40%;}.cancel{ /*background-color: rgb(175,194,211);*/ margin-left: 10px;}為了模擬進度的顯示，在這里用了兩個span：
<div class="progress"> <span class="upload-text"></span> <span class="uploaded"></span></div>
上面一個是用來顯示百分比的，下面一個用來填色的：
.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;}為了逼真，給填色的span設(shè)置背景色，其寬度就是進度的百分比，最后就用js來模擬進度的變化了：
// 模擬進度 function progressBar() { var max = 100; var init = 0; var uploaded; var test = setInterval(function() { init += 10; 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(); }); $uploadMask.on('click',function() { clearInterval(test); closeConfirmCancel(); }) } },1000); }JQuery實現(xiàn)文件上傳進度條,能顯示上傳的百分比等信息，內(nèi)容就到這里了，希望大家能夠喜歡。
新聞熱點
疑難解答
