上傳的進(jìn)度條實(shí)時(shí)反映上傳情況

2019-11-18 20:15:08

字體：大中小

供稿：網(wǎng)友

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

（注：我們?cè)赼bcupload自帶例子基礎(chǔ)上改進(jìn)。）

progressupload.htm（上傳文件的前臺(tái)提交，我們讓進(jìn)度條在這個(gè)里面顯示）

<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">剩余時(shí)間:</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（返回上傳狀況數(shù)據(jù)的文件）

<%@EnablesessionState=False%>

<%

On Error Resume Next

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

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

'將返回?cái)?shù)據(jù)以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>

傳送結(jié)束

</body>

</html>

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

希望大家有什么意見(jiàn)和建議和我聯(lián)系：）

junminliu@msn.com

上一篇：ASP中巧用Split()函數(shù)生成SQL查詢(xún)語(yǔ)句

下一篇：IIS使用10則