AspUpload实时上传进度的AJAX方法

版权声明：原创文章，未经允许禁止转载！ https://blog.csdn.net/mlibai/article/details/44814507

函数名：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);}
	}
}