上傳的進度條實時反映上傳情況

2019-11-18 20:15:08

字體：大中小

來源：轉載

供稿：網友

asp中使用組件上傳時，有點麻煩就是不知道上傳進度是多少，雖然有的提供了上傳進度條，例如abcupload（下載地址：http://www.websupergoo.com）已經提供了顯示當前上傳狀態的方法，里面就有專門的實例（在安裝目錄的Examples下面的PRogressupload.htm），它是提交數據的同時彈出一個反映進度的頁面（progressbar.asp），然后通過這個頁面自刷新來每隔一點時間獲取當時的上傳狀態，然后把它們顯示出來，但是用頁面自刷新的方法效率比較低，不不好調節刷新時間間隔（最小間隔為1秒），而且服務器端返回數據量大，所以不能很好的實時反映上傳情況。在客戶端使用javascript調用MSxml對象和setTimout方法去定時load一個xml文件可以實現無刷新定時獲取服務器端數據，在這里可以讓progressbar.asp輸出xml格式的數據，然后供客戶端load，僅返回必要的幾個參數，這樣：頁面不刷新；傳輸的數據少，不需要把所有數據全傳到客戶端，只傳輸反映狀態的數據，如果定時器設置的時間足夠小，那么我們就可以"實時"看到上傳的狀況了。以下就以abcupload4為例來說明怎么來制作實時的文件上傳進度條。

（注：我們在abcupload自帶例子基礎上改進。）

progressupload.htm（上傳文件的前臺提交，我們讓進度條在這個里面顯示）

<html>

<body>

<script language="Javascript">



</script>

<form name="myform" method="post" action="progressupload.asp" enctype="multipart/form-data" target=up>

<input type="file" name="filefield1"><br>

<input type="button" name="dosubmit" value="Upload" onclick="s()"><br>

<div id=bar1 style="display:none">

<table border="0" width="100%">

  <tr>

    <td><font face="Verdana, Arial, Helvetica, sans-serif" size="2"><b>傳送:</b></font></td>

  </tr>

  <tr bgcolor="#999999">

    <td>

      <table border="0" width="" cellspacing="1" bgcolor="#0033FF" id=PercentDone>

        <tr>

          <td><font size=1> </font></td>

        </tr>

      </table>

    </td>

  </tr>

  <tr>

    <td>

      <table border="0" width="100%">

        <tr>

          <td><font face="Verdana, Arial, Helvetica, sans-serif" size="1">剩余時間:</font></td>

          <td><font face="Verdana, Arial, Helvetica, sans-serif" size="1">

                 <span id=min></span> 分

              <span id=secs></span> 秒

              (<span id=BytesDone></span> KB of

              <span id=BytesTotal></span> KB 已上傳)</font></td>

        </tr>

        <tr>

          <td><font face="Verdana, Arial, Helvetica, sans-serif" size="1">

              傳送速度:</font></td>

          <td><font face="Verdana, Arial, Helvetica, sans-serif" size="1">

              <span id=BytesPerSecond></span> KB/秒</font></td>

        </tr>

        <tr>

          <td><font face="Verdana, Arial, Helvetica, sans-serif" size="1">信息:</font></td>

          <td><font face="Verdana, Arial, Helvetica, sans-serif" size="1"><span id=Information></span></font></td>

        </tr>

      </table>

    </td>

  </tr>

  <tr></tr>

</table>

</div>

<iframe name="up" style="display:none"></iframe>

</form>

</body>

</html>

progressbar.asp（返回上傳狀況數據的文件）

<%@EnablesessionState=False%>

<%

On Error Resume Next

Set theProgress = Server.CreateObject("ABCUpload4.XProgress")  '創建上傳組件對象

theProgress.ID = Request.QueryString("ID")

'將返回數據以xml格式輸出

%>

<?xml version="1.0" encoding="gb2312" ?>

<plan>

       <PercentDone><%=theProgress.PercentDone%></PercentDone>

       <min><%=Int(theProgress.SecondsLeft/60)%></min>

       <secs><%=theProgress.SecondsLeft Mod 60%></secs>

       <BytesDone><%=Round(theProgress.BytesDone / 1024, 1)%></BytesDone>

       <BytesTotal><%=Round(theProgress.BytesTotal / 1024, 1)%></BytesTotal>

       <BytesPerSecond><%=Round(theProgress.BytesPerSecond/1024, 1)%></BytesPerSecond>

       <Information><%=theProgress.Note%></Information>

</plan>

progressupload.asp（處理上傳文件）

<%@EnableSessionState=False%>

<%

Response.Expires = -10000

Server.ScriptTimeOut = 300

Set theForm = Server.CreateObject("ABCUpload4.XForm")

theForm.Overwrite = True

theForm.MaxUploadSize = 8000000

theForm.ID = Request.QueryString("ID")

Set theField = theForm("filefield1")(1)

If theField.FileExists Then

       theField.Save theField.FileName

End If

%>

<html>

<body>

傳送結束

</body>

</html>

對于其他組件上傳，原理也就差不多了，只是方法不一樣罷了。

希望大家有什么意見和建議和我聯系：）

junminliu@msn.com

上一篇：ASP中巧用Split()函數生成SQL查詢語句

下一篇：IIS使用10則