作者banana2014 (香蕉共和國)
看板Ajax
標題Re: [問題] 請問如何實現ajax的載入時進度百分比?
時間Fri May 1 04:39:58 2015
※ 引述《banana2014 (香蕉共和國)》之銘言：
: 當用ajax傳輸資料時，在還沒有得到伺服器端運算的結果時，如何得到目前的進度百分比?
源自
http://blog.toright.com/posts/3585/ajax-利用-xhr2-實作下載進度列-progress-event.html
javascript:
<!DOCTYPE html>
<html>
<head>
<title>XMLHttpRequest Download Progress</title>
</head>
<body>
<progress id="p"></progress>
<script>
var progressBar = document.getElementById('p'), client = new XMLHttpRequest();
client.open('GET', 'your-download-file.dat');
client.onprogress = function(event) {
if(event.lengthComputable) {
progressBar.max = event.total;
progressBar.value = event.loaded;
}
};
client.onloadend = function(event) {
progressBar.value = event.loaded;
};
client.send();
</script>
</body>
<html>
jquery:
<!DOCTYPE html>
<html>
<head>
<title>XMLHttpRequest Download Progress (jQuery)</title>
<script src="jquery-1.11.0.min.js"></script>
</head>
<body>
<progress id="p"></progress>
<script>
$(document).ready(function () {
$.ajax({
type: 'GET',
url: 'your-download-file.dat',
xhrFields: {
onprogress: function (event) {
//Download progress
if (event.lengthComputable) {
$('#p').attr('max', event.total);
$('#p').attr('value', event.loaded);
}
}
}
});
});
</script>
</body>
<html>
我用這兩種方式來讀取下載進度，但是好像都行不通，請問哪裡出了問題?
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 219.80.130.230
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Ajax/M.1430426402.A.532.html
<script src="jquery.js" type="text/javascript"></script>
<script>
var percentComplete=document.getElementById('a');
$.ajax({
type: 'POST',
url: "ajax2.php",
data: {},
beforeSend: function(evt)
{
if (evt.lengthComputable) {
percentComplete.innerHTML = evt.loaded / evt.total;
//Do something with download progress
}
},
success: function(data){
alert(data);
}
});
</script>
<div id="a"></div>
以上程式碼一樣行不通，請問哪裡有錯了?
※ 編輯: banana2014 (219.80.130.230), 05/01/2015 05:21:44
1F：→ shadowjohn: 你的 <div id="a"></div> 比script 還低，這樣不行 05/01 16:30
2F：→ banana2014: 改了還是顯示不出進度百分比的值耶… 05/01 16:46
3F：→ banana2014: .lengthComputable、.loaded、.total是不是有問題啊， 05/01 16:51
4F：→ banana2014: 不然怎麼都沒有顯示? 05/01 16:51