函数名:UploadingProgress
参数列表:
Container:必须,bootstrap进度条的容器,就是进度条显示的位置。
PID:必须,用于查询上传进度;
callBack:可选,上传成功时的回调函数。
方法:
Request()方法:实例化后,调用此方法才能开始实时刷新进度条,该方法可接受一个参数,用于显示实时的上传速度、进度等信息。
Finished()方法:此方法提供三个参数,一个用于显示上传完成的消息的容器和消息内容,可选第三个参数,可为callBack函数提供一个参数。
Stop()和Failed()方法:手动停止上传和上传失败。
//显示文件上传进度
/*
* Container,必须,显示进度条的容器,bootstrap进度条progress样式。
* ASPUpload用来查询上传进度的PID
* callBack上传成功后的回调函数
* 上传完成是通过Finish方法实现的,可以在该方法的第三个参数传入一个数值供callBack调用
* 调用Request方法开始刷新上传进度,可以给该方法提供一个容器,用来显示实时的上传速度、百分比、剩余时间等信息。
*/
function UploadingProgress(Container, PID, callBack){
//创建AJAX对象
this.getXMLObject = function(){
var xmlHttp = null;
try {// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();}
catch(e) {// Internet Explorer
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
var Zero = 0;
var Max = 0;
var TimeoutID = "";
var xmlHttp = this.getXMLObject();
var that = this;
$(Container).html('<div class="progress"><div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:0%;"></div></div>');
/*请求查询上传进度*/
this.Request = function(TV){
xmlHttp.open('POST', '/IP/Uploading/state/?PID=' + PID, true);
xmlHttp.onreadystatechange = function() {
if (!!xmlHttp && xmlHttp.readyState == 4 && xmlHttp.status == 200) {
if( xmlHttp.responseText == "" ) {
that.Finished(TV, "上传完成");
//Max = 100;
/*只有在上传完毕后的一瞬间,查询的responseText才为空,所以查询是否完成,只能靠执行页面的结果来判断。*/
}
else {
var Xml = xmlHttp.responseXML;
var state = {};
state.PercentComplete = Xml.getElementsByTagName('PercentComplete')[0].firstChild.nodeValue;
state.RemainingTime = Xml.getElementsByTagName('RemainingTime')[0].firstChild.nodeValue;
state.TransferSpeed = Xml.getElementsByTagName('TransferSpeed')[0].firstChild.nodeValue;
state.TotalBytes = Xml.getElementsByTagName('TotalBytes')[0].firstChild.nodeValue;
state.UploadedBytes = Xml.getElementsByTagName('UploadedBytes')[0].firstChild.nodeValue;
/* 若查询到的TotalBytes值为0,则使Zero增加1,最多查询10次,判断查询上传进度超时 */
if(Zero < 11) {
if(state.TotalBytes=="0"){
if(Max>0){/*如果之前查询到上传进度,判断为上传完成*/
that.Finished(TV, "上传完成");
}else{
Zero++;
TimeoutID = setTimeout(function(){that.Request(TV);}, 500);
}
}else{
if(parseInt(state.PercentComplete)>Max){Max = parseInt(state.PercentComplete);}
$("div.progress div.progress-bar").css("width", state.PercentComplete+"%");
if(!!TV){
$(TV).find(".PercentComplete").text(state.PercentComplete+"%");
$(TV).find(".TransferSpeed").text(state.TransferSpeed+"/S");
$(TV).find(".RemainingTime").text(state.RemainingTime);
$(TV).find(".TotalBytes").text(state.TotalBytes);
$(TV).find(".UploadedBytes").text(state.UploadedBytes);
}
TimeoutID = setTimeout(function(){that.Request(TV);}, 500);
}
}else{
clearTimeout(TimeoutID);
that.Failed("查询上传状态超时");
}
}
}
}
xmlHttp.send(null);
}
/*上传成功*/
this.Success = function(){
}
/*上传完成*/
this.Finished = function(TV, msg, exData){
xmlHttp = null;
clearTimeout(TimeoutID);
$(TV).html(msg);
$("div.progress div.progress-bar").css("width", "100%");
if(typeof callBack=='function'){
setTimeout(function(){callBack(exData)}, 2000);
}
}
/*停止上传*/
this.Stop = function(){
xmlHttp = null;
if(navigator.appName == "Microsoft Internet Explorer") {
document.execCommand('Stop');
} else {
window.stop();
}
clearTimeout(TimeoutID);
}
/*上传失败*/
this.Failed = function(TV, msg){
xmlHttp = null;
clearTimeout(TimeoutID);
$(TV).html(msg);
//if(typeof callBack=='function'){setTimeout(callBack, 2000);}
}
}