📄 example_progress_xmlhttp.htm
字号:
<html>
<body>
<script language="javascript">
var oXMLDoc = new ActiveXObject("Microsoft.XMLDOM"); //创建'MSXML'对象
var theUniqueID= 0;
var iTimerID=null; //这个变量是作定时器的ID
//让数据提交的同时执行显示进度条的函数
function UploadData()
{
theUniqueID = (new Date()).getTime() % 1000000000;
// 清除原始数据
PercentDone.style.width = "0%";
ElapsedTime.innerHTML = "";
TimeLeft.innerHTML = "";
SizeCompleted.innerHTML = "";
TotalSize.innerHTML = "";
TransferRate.innerHTML = "";
document.myform.action = "Example_Progress.asp?ProgressID=" + theUniqueID; //处理上传数据的程序
//将提交的数据放在一个名字是upload隐藏的iframe里面处理，这样提交的页面就不会跳转到处理数据的页
document.myform.target="upload"
document.myform.submit(); //提交表单
ProgressBar(); //开始执行反映上传情况的函数
}
function ProgressBar()
{
sURL = "Progress_Xml.asp?ProgressID=" + theUniqueID + "&temp="+Math.random(); //获取上传状态数据的地址
oXMLDoc.async = true;
oXMLDoc.onreadystatechange = Function( "fnLoadComplete();" );
oXMLDoc.load( sURL );
}
function fnLoadComplete()
{
var iReadyState；
try
{
iReadyState = oXMLDoc.readyState;
}
catch(e)
{
return;
}
if( iReadyState != 4 ) return;
if( oXMLDoc == null || oXMLDoc.xml == "" )
{
window.status = 'Xml load fault';
return;
}
var oRoot = oXMLDoc.documentElement; //获取返回xml数据的根节点
if(oRoot != null)
{
if (oRoot.selectSingleNode("ErrorMessage") == null)
{
var readyState = oRoot.selectSingleNode("ReadyState").text;
// 如果还没初始化完成，继续
if ( readyState == "uninitialized" )
{
iTimerID = setTimeout("ProgressBar()", 1000);
}
// 上传进行中
else if ( readyState == "loading" ) //文件上传结束就取消定时器
{
bar1.style.display = 'block'; //让显示上传进度显示的层的可见
PercentDone.style.width = oRoot.selectSingleNode("Percentage").text; //设置进度条的百分比例
//根据返回的数据在客户端显示
ElapsedTime.innerHTML = oRoot.selectSingleNode("ElapsedTime").text; //显示剩余时间
TimeLeft.innerHTML = oRoot.selectSingleNode("TimeLeft").text; //显示剩余时间
SizeCompleted.innerHTML = oRoot.selectSingleNode("SizeCompleted").text; //已上传数据大小
TotalSize.innerHTML = oRoot.selectSingleNode("TotalSize").text; //总大小
TransferRate.innerHTML=oRoot.selectSingleNode("TransferRate").text; //传输速率
//这里设定时间间隔是0.5秒，你也可以根据你的情况修改获取数据时间间隔
iTimerID = setTimeout("ProgressBar()", 100);
}
// 上传结束
else if ( readyState == "loaded" )
{
PercentDone.style.width = "100%"; //设置进度条的百分比例
if (iTimerID != null)
clearTimeout(iTimerID)
iTimerID = null;
alert("上传结束，服务器处理中...");
}
// 上传结束
else
{
if (iTimerID != null)
clearTimeout(iTimerID)
iTimerID = null;
alert("上传结束");
}
}
else
{
alert(oRoot.selectSingleNode("ErrorMessage").text);
}
}
}
function CacelUpload()
{
upload.location.href = "about:blank";
if (iTimerID != null)
clearTimeout(iTimerID)
iTimerID = null;
bar1.style.display = '';
}
</script>
<form name="myform" method="post" action="Example_Progress.asp" enctype="multipart/form-data" target="upload">
上传测试：请上传小于10MB的文件<BR>
<input type="file" name="filefield1"><br>
<input type="button" value="上传" onclick="UploadData()">
<input type="button" value="取消上传" onclick="CacelUpload()"><br>
<div id=bar1 style="display:">
<table border="0" width="100%">
<tr>
<td><b>传送:</b></td>
</tr>
<tr bgcolor="#999999">
<td>
<table border="0" width="" cellspacing="1" bgcolor="#0033FF" id="PercentDone">
<tr>
<td> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr><td>总 大 小: </td><td id="TotalSize"></td></tr>
<tr><td>已经上传: </td><td id="SizeCompleted"></td></tr>
<tr><td>平均速率:</td><td id="TransferRate"></td></tr>
<tr><td>使用时间:</td><td id="ElapsedTime"></td></tr>
<tr><td>剩余时间:</td><td id="TimeLeft"></td></tr>
</table>
</td>
</tr>
</table>
</div>
<iframe name="upload" style="width:100%"></iframe>
</form>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -