作者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/cn.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