Re: [問題] 請問如何實現ajax的載入時進度百分比?

作者: banana2014 (香蕉共和國)   2015-05-01 04:39:58
※ 引述《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>
我用這兩種方式來讀取下載進度,但是好像都行不通,請問哪裡出了問題?
作者: shadowjohn (轉角遇到愛)   2015-05-01 16:30:00
你的 <div id="a"></div> 比script 還低,這樣不行
作者: banana2014 (香蕉共和國)   2015-05-01 16:46:00
改了還是顯示不出進度百分比的值耶….lengthComputable、.loaded、.total是不是有問題啊,不然怎麼都沒有顯示?

Links booklink

Contact Us: admin [ a t ] ucptt.com