當前位置:首頁 » 文件管理 » asp文件上傳帶進度條

asp文件上傳帶進度條

發布時間: 2024-10-25 17:19:54

1. 急!ASP.NET+Ajax實現視頻文件上傳帶進度條

我建議用flash的吧,現在有兩個比較強大的,一個是swfupload另一個是uploadify,兩者都是任何語言都可以使用的,提供了介面,兩種我都用了,雖然剛開始研究有些吃力,但研究好了,你會發現,你的最終選擇會是這兩個,網上的垃圾確實很多。希望可以幫到你。

2. asp 如何實現帶進度條的上傳文件功能

以下就以abcupload4為例來說明怎麼來製作實時的文件上傳進度條。

(註:我們在abcupload自帶例子基礎上改進。)

progressupload.htm(上傳文件的前台提交,我們讓進度條在這個裡面顯示)

<HTML>

<body>

<script language="javascript">

<!--

theUniqueID = (new Date()).getTime() % 1000000000;

function s() //讓數據提交的同時執行顯示進度條的函數

{

bar(); //開始執行反映上傳情況的函數

document.myform.action = "progressupload.ASP?ID=" theUniqueID; //處理上傳數據的程序

document.myform.target="up" //將提交的數據放在一個名字是up隱藏的iframe裡面處理,這樣提交的頁面就不會跳轉到處理數據的頁

document.myform.submit(); //提交表單

}

function bar()

{

bar1.style.display=''; //讓顯示上傳進度顯示的層的可見

var timeoutid=null; //這個變數是作定時器的ID

var oXMLDoc = new ActiveXObject('MSXML'); //創建'MSXML'對象

sURL = "progressbar.ASP?ID=" theUniqueID "&temp=" Math.random(); //獲取上傳狀態數據的地址

oXMLDoc.url = sURL; //load數據

var oRoot=oXMLDoc.root; //獲取返回XML數據的根節點

if(oRoot.children != null)

{

if (oRoot.children.item(0).text-100==0) //文件上傳結束就取消定時器

clearTimeout(timeoutid)

PercentDone.style.width=oRoot.children.item(0).text "%"; //設置進度條的百分比例

//根據返回的數據在客戶端顯示

min.innerHTML=oRoot.children.item(1).text; //顯示剩餘時間(分鍾)

secs.innerHTML=oRoot.children.item(2).text; //顯示剩餘時間(秒鍾)

BytesDone.innerHTML=oRoot.children.item(3).text; //已上傳數據大小

BytesTotal.innerHTML=oRoot.children.item(4).text; //總大小

BytesPerSecond.innerHTML=oRoot.children.item(5).text; //傳輸速率

Information.innerHTML=oRoot.children.item(6).text; //上傳信息

}

if (oRoot.children.item(0).text-100<0) //只要文件沒有傳完,就每隔多少時間獲取一次數據

timeoutid = setTimeout("bar()",50) //這里設定時間間隔是0.05秒,你也可以根據你的情況修改獲取數據時間間隔

}

//-->

</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>

3. ajax多文件上傳如何實現進度條

可以找一個上傳插件,如:webupload。
上傳插件可以配置顯示上傳進度,多文件上傳可以同時顯示多個文件的進度條。
如果自己寫的話,需要考慮瀏覽器兼容和文件上傳控制等。

4. 前端上傳文件實時顯示進度條和上傳速度的工作原理是怎樣的

xhr對象的upload.onprogress事件在上傳過程中會多次回調
可以獲取到當前上傳的位元組數、總位元組數、時間戳等信息

根據上傳位元組數和總位元組數計算上傳百分比
根據時間戳可以判斷兩次progress事件間隔,再判斷此期間內的上傳位元組數,做個除法就是上傳速度

5. 電腦文件傳輸進度顯示

文件上傳進度顯示的效果是:點擊按鈕,進度條和進度值顯示相應的文件上傳進度。
實現步驟如下(1) 添加布局和元素:
綠色的是一個層,層中加入的是「同步數據」元素。「選擇文件」是在單行文本的基礎上修改而成的。插入一個單行文本,」選擇文件「下面添加的是從左側」靜態元素「中拖來的進度條。
(2) 「同步數據」元素的設置在元素上右鍵選擇「獲取數據元素設置」,彈出對話框,在元素上右鍵選擇「邏輯」→數據綁定→綁定模式:屬性綁定→綁定參{"data--sync":update,"data-x-pg":pg}。
(3) 進度條的設置找到進度條的內側 div(進度條有兩層div),在內側div上設置數據綁定,綁定參數:{"width":(pg() * 100).toFixed(2) +"%"},綁定變數初始化:{"pg":0}。toFixed(n)表示保留n位小數。在樣式類文件中添加如下樣式類.progress-bar { -webkit-transition: width 0s ; -o-transition: width 0s; transition: width 0s;}。
(4) 設置進度值在上傳進度的數值上加上span標簽。
(5) 按鈕設置
同步按鈕的邏輯設置如下:
高級編輯填入的代碼為:_vm.update("true")。取消按鈕的設置與同步按鈕的設置大致相同,不同的是高級編輯填入的代碼為:_vm.update("")。
文件的大小讀取和數據讀取在線程中,使用信號和槽發送到主進程,更新到ui控制項上。
先在線程當中發送文件的大小到主進程,通過setRange設置進度條控制項的范圍,再按行讀取並將每次按行讀到數據大小發到主進程,通過setValue疊加設置當前進度條的值。

6. 文件上傳時,進度條的設計原理是什麼

而計算進度的原理,不就是已經傳輸的大小與總大小的比值嘛。 這樣就簡單了,就拿最基本的OutputStream來說,它的基本的寫出方法為 void write(byte[] b) ,實際上寫出的過程不就是通過InputStream循環讀,然後OutputStream循環寫嘛。 你只要事先通過File類取得文件的總大小,然後在讀入或寫出的循環里加一個簡單的進度計算的步驟,每讀取或寫出一次,就將已傳輸大小增加b.length,求出比值,更新進度條。具體的計算間隔,可以根據循環次數或時間間隔來定。

7. asp上傳圖片原理(不要代碼)只求論理

asp無組件上傳的原理

一、無組件上傳的原理
我還是一點一點用一個實例來說明的吧,客戶端HTML如下。要瀏覽上傳附件,我們通過<input type="file">元素,但是一定要注意必須設置form的enctype屬性為"multipart/form-data":

<form method="post" action="upload.asp" enctype="multipart/form-data">
<label>
<input type="file" name="file1" />
</label>
<br />
<input type="text" name="filename" value="default filename"/>
<br />
<input type="submit" value="Submit"/>
<input type="reset" value="Reset"/>
</form>

在後台asp程序中,以前獲取表單提交的ASCII 數據,非常的容易。但是如果需要獲取上傳的文件,就必須使用Request對象的BinaryRead方法來讀取。BinaryRead方法是對當前輸入流進行指定位元組數的二進制讀取,有點需要注意的是,一旦使用BinaryRead 方法後,再也不能使用Request.Form 或 Request.QueryString 集合了。結合Request對象的TotalBytes屬性,可以將所有表單提交的數據全部變成二進制,不過這些數據都是經過編碼的。首先讓我們來看看這些數據是如何編碼的,有無什麼規律可循,編段代碼,在代碼中我們將BinaryRead讀取的二進制轉化為文本,輸出出來,在後台的upload.asp中(注意該示例不要上傳大文件,否則可能會造成瀏覽器死掉):
<%
Dim biData, PostData
Size = Request.TotalBytes
biData = Request.BinaryRead(Size)
PostData = BinaryToString(biData,Size)
Response.Write "<pre>" & PostData & "</pre>" '使用pre,原樣輸出格式
' 藉助RecordSet將二進制流轉化成文本
Function BinaryToString(biData,Size)
Const adLongVarChar = 201
Set RS = createObject("ADODB.Recordset")
RS.Fields.Append "mBinary", adLongVarChar, Size
RS.Open
RS.AddNew
RS("mBinary").AppendChunk(biData)
RS.update
BinaryToString = RS("mBinary").Value
RS.Close
End Function
%>

簡單起見,上傳一個最簡單的文本文件(G:\homepage.txt,內容為"寶玉:http://www.webuc.net")來試驗一下,文本框filename中保留默認值"default filename",提交看看輸出結果:

-----------------------------7d429871607fe
Content-Disposition: form-data; name="file1"; filename="G:\homepage.txt"
Content-Type: text/plain
寶玉:http://www.webuc.net
-----------------------------7d429871607fe
Content-Disposition: form-data; name="filename"
default filename
-----------------------------7d429871607fe--
可以看出來對於表單中的項目,是用過"-----------------------------7d429871607fe"這樣的邊界來分隔成一塊一塊的,每一塊的開始都有一些描述信息,例如:Content-Disposition: form-data; name="filename",在描述信息中,通過name="filename"可以知道表單項的name。如果有filename="G:\homepage.txt"這樣的內容,說明是一個上傳的文件,如果是一個上傳的文件,那麼描述信息會多一行Content-Type: text/plain來描述文件的Content-Type。描述信息和主體信息之間是通過換行來分隔的。

嗯,基本上清晰了,根據這個規律我們就知道該怎麼來分離數據,再對分離的數據進行處理了,不過差點忽略一個問題,就是邊界值(上例中的"-----------------------------7d429871607fe")是怎麼知道的?每次上傳這個邊界值是不一樣的,還好還好asp中可以通過Request.ServerVariables( "HTTP_CONTENT_TYPE")來獲之,例如上例中HTTP_CONTENT_TYPE內容為:"multipart/form-data; boundary=---------------------------7d429871607fe",有了這個,我們不僅可以判斷客戶端的form中有無使用enctype="multipart/form-data"(如果沒有使用,那麼下面就沒必要執行啦),還可以獲取邊界值boundary=---------------------------7d429871607fe。(注意:這里獲取的邊界值比上面的邊界值開頭要少"--",最好補充上。)

至於如何分析數據的過程我就不多贅述了,無非就是藉助InStr,Mid等這樣的函數來分離出來我們想要的數據。

二、分塊上傳,記錄進度
要實時反映進度條,實質就是要實時知道當前伺服器獲取了多少數據?再回想一下我們實現上傳的過程,我們是通過Request.BinaryRead(Request.TotalBytes)來實現的,在Request的過程中我們無法得知當前伺服器獲取了多少數據。所以只能通過變通的方法了,如果我們可以將獲取的數據分成一塊一塊的,然後根據已經上傳的塊數我們就可以算出來當前上傳了多大了!也就是說,如果我1K為1塊,那麼上傳1MB的輸入流就分成1024塊來獲取,例如我當前已經獲取了100塊,那麼就表明當前上傳了100K。當我提出分塊的時候很多人覺得不可思議,因為他們都忽略BinaryRead方法不僅是可以讀取指定大小,而且可以連續讀取的。

寫個例子來驗證一下分塊讀取的完整性,在剛才的例子基礎上(注意該示例不要上傳大文件,否則可能會造成瀏覽器死掉):

<%
Dim biData, PostData, TotalBytes, ChunkBytes
ChunkBytes = 1 * 1024 ' 分塊大小為1K
TotalBytes = Request.TotalBytes ' 總大小
PostData = "" ' 轉化為文本類型後的數據
ReadedBytes = 0 ' 初始化為0
' 分塊讀取
Do While ReadedBytes < TotalBytes
biData = Request.BinaryRead(ChunkBytes) ' 當前塊
PostData = PostData & BinaryToString(biData,ChunkBytes) ' 將當前塊轉化為文本並拼接
ReadedBytes = ReadedBytes + ChunkBytes ' 記錄已讀大小
If ReadedBytes > TotalBytes Then ReadedBytes = TotalBytes
Loop
Response.Write "<pre>" & PostData & "</pre>" ' 使用pre,原樣輸出格式
' 將二進制流轉化成文本
Function BinaryToString(biData,Size)
Const adLongVarChar = 201
Set RS = createObject("ADODB.Recordset")
RS.Fields.Append "mBinary", adLongVarChar, Size
RS.Open
RS.AddNew
RS("mBinary").AppendChunk(biData)
RS.update
BinaryToString = RS("mBinary").Value
RS.Close
End Function
%>

試驗一下上傳剛才的文本文件,輸出結果證明這樣分塊讀取的內容是完整的,並且在While循環中,我們可以在每次循環時將當前狀態記錄到Application中,然後我們就可以通過訪問該Application動態獲取上傳進度條。

另:上例中是通過字元串拼接的,如果是要拼接二進制數據,可以通過ADODB.Stream對象的Write方法,示例代碼如下:

Set bSourceData = createobject("ADODB.Stream")
bSourceData.Open
bSourceData.Type = 1 'Binary
Do While ReadedBytes < TotalBytes
biData = Request.BinaryRead(ChunkBytes)
bSourceData.Write biData ' 直接使用write方法將當前文件流寫入bSourceData中
ReadedBytes = ReadedBytes + ChunkBytes
If ReadedBytes > TotalBytes Then ReadedBytes = TotalBytes
Application("ReadedBytes") = ReadedBytes
Loop

三、保存上傳的文件
通過Request.BinaryRead獲取提交數據,分離出上傳文件後,根據數據類型的不同,保存方式也不同:

對於二進制數據,可以直接通過ADODB.Stream對象的SaveToFile方法,將二進制流保存成為文件。
對於文本數據,可以通過TextStream對象的Write方法,將文本數據保存到文件中。
對於文本數據和二進制數據,是可以方便的相互轉換的,對於上傳小文件來說,兩者基本上沒什麼差別。但是兩種方式保存時還是有一些差別的,對於ADODB.Stream對象,必須將所有數據全部裝載完才可以保存成文件,所以使用這種方式如果上傳大文件將很佔用內存,而對於TextStream對象,可以在文件創建好後,一次Write一部分,分多次Write,這樣的好處是不會佔用伺服器內存空間,結合上面分析的分塊獲取數據原理,我們可以每獲取一塊上傳數據就將之Write到文件中。我曾做過試驗,同樣本機上傳一個200多MB的文件,使用第一種方式內存一直在漲,到最後直接提示計算機虛擬內存不足,最可恨是即使進度條表示文件已經上傳完,但是最終文件還是沒有保存上。而使用後一種方法,上傳過程中內存基本上無什麼變化。

四、未解決的難題
我在博客園上看到Bestcomy描述他的Asp.Net上傳組件是可以和Sever.SetTimeOut無關的,而在Asp中我是沒能做到,對於上傳大文件,就只有將Server.SetTimeOut設置為一個很大的值才可以。不知道有沒有比較好的解決方法。

如果我們在保存文件時,使用TextStream對象的Write方法,那麼如果用戶上傳時中斷了文件傳輸,已經上傳的那部分文件還是在的,如果可以斷點續傳就好了。關鍵問題是Request.BinaryRead方法雖然可以分塊讀取,但是卻不能跳過某一段讀取!

8. 前端上傳文件實時顯示進度條和上傳速度的工作原理是怎樣的

後端的責任。

熱點內容
值班發布源碼 發布:2024-10-25 19:23:50 瀏覽:369
php實現注冊登陸 發布:2024-10-25 19:22:56 瀏覽:545
android開發庫 發布:2024-10-25 18:50:28 瀏覽:231
優酷路由寶存儲 發布:2024-10-25 18:41:37 瀏覽:934
pythoncmdb 發布:2024-10-25 18:41:29 瀏覽:200
安卓觸控屏不靈怎麼辦 發布:2024-10-25 17:31:22 瀏覽:872
中信銀行信用卡激活後密碼是多少 發布:2024-10-25 17:28:31 瀏覽:506
cocos2d30編譯 發布:2024-10-25 17:20:51 瀏覽:994
app直播平台源碼 發布:2024-10-25 17:19:57 瀏覽:224
asp文件上傳帶進度條 發布:2024-10-25 17:19:54 瀏覽:659