?? 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 + -