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