作者shadowjohn (這事要用身體解釋)
看板Ajax
標題Re: [問題] 請問如何實現ajax的載入時進度百分比?
時間Fri May 1 20:39:38 2015
※ 引述《banana2014 (香蕉共和國)》之銘言：
: ※ 引述《banana2014 (香蕉共和國)》之銘言：
: : 當用ajax傳輸資料時，在還沒有得到伺服器端運算的結果時，如何得到目前的進度百分比?
: http://shadowjohn.pcro.co/uploads/
: 請問這上傳進度百分比是怎麼做到的，可以告訴我詳細步驟嗎?
: 上傳如果可以用AJAX來判斷上傳進度，那載入畫面(對AJAX而言是載入資訊)可以嗎?
: 我知道有個叫什麼pace的東西，好像也可以在載入畫面時顯示進度條，但是它只能在頁面
: 剛載入時顯示出來，對於ajax的載入資訊好像不會顯示進度條耶，請問ajax版的載入資訊
: 進度條該怎麼做，請各位幫幫我，謝謝。
我把 Code 整理了一下
這是上傳有進度的範例:
範例網址：
http://3wa.tw/muploads/
原始內容：
http://3wa.tw/muploads/index.phps
註解也寫了，如果不懂可以問我 :)
其實關鍵就主要是：
1. 載入 jquery、jquery.form
2. 「ajaxSubmit」代替原本的 form submit
3. 利用 uploadProgress 取得的資訊來作 progress value or bar
如果你是要上傳後，東西開始後伺服器後面運作，前端想要偶爾知道該工作的進度
最簡單的方法，就是在你後台的東西，依照進度，偶爾去更新一個 id.txt
id.txt
5%
隔一段時間，你知道他進度又提升，變 20%
那你就把 id.txt 內容設成 20%
你的前端，就用 ajax 定期(一秒)去要新的值回來
setInterval(function(){
var tmp = ajax....('id.txt');....
顯視內容
},1000);
簡單的這樣作就ok啦 :)
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 123.110.45.216
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Ajax/M.1430483981.A.CD1.html
1F：推 Timba: PUSH 05/02 20:34
2F：推 banana2014: 請問這個jquery.form適用於AJAX的資訊下載進度百分比 05/03 13:29
3F：→ banana2014: 嗎? 05/03 13:29
4F：→ shadowjohn: 下載不是有瀏覽器本身的進度? 05/03 14:46
5F：推 banana2014: 嗯…我說的下載是載入資訊的下載 05/05 21:26