當前位置：首頁 > 编程语言 > asp.net >内容正文

asp.net

Asp.Net 上传大文件专题(4)--利用ajax技术显示上传进度

發布時間：2023/12/14 asp.net 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 Asp.Net 上传大文件专题(4)--利用ajax技术显示上传进度小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

======================================================
注：本文源代碼點此下載
======================================================

asp.net 上傳大文件專題(4)--利用ajax技術顯示上傳進度

回顧上一篇:

我們介紹了如何從http請求流中將數據部分進行截取,同時將數據相關信息進行保存。

本篇概述:

用過ajax的朋友應該有聽過xmlhttprequest對象,ajax其實就是通過xmlhttprequest對象來向服務器發出異步請求,并從服務器獲得數據,然后用javascript來操作dom而更新頁面。

本篇就是要通過xmlhttprequest對象來實現實時的進度顯示。

效果圖:

正文部分:

看過有些前輩的做法是通過設置http請求的refresh頭字段來定時刷新頁面從而顯示進度,但是這樣就會帶動整個頁面一起刷新,就算我們把進度條做成單獨的頁面,效果仍舊不是太好。我之前試過用ajax的timer組件,但是不知道是何原因,timer控件在iis下預覽時總是無法正常發揮作用?？鄲懒撕靡魂囎?懷疑是ms的bug。最后發現了一個很好的替代辦法就是利用xmlhttprequest對象來自己實現定時刷新,這樣每次只需向服務器請求很少的數據,減少了對服務器的壓力,在后期的測試中,發現這個辦法確實很好用,而且在iis下也一切正常(上圖就是iis下運行的效果)。

當然如果光有進度條沒有數據,那這個進度條也只能是個擺設,所以我把接下來的內容分成兩塊:進度信息的保存、進度的顯示

1、進度信息的保存

首先我們要明白進度條在這里反應的是什么的進度?毫無疑問是文件上傳的進度嘍~~在上一篇中,我們對上傳的文件數據進行了提取,也就是說這個提取的進度就是我們要顯示給客戶端的進度。那就簡單了,我們只要把已經提取的文件大小與總的文件大小比對一下,就可以知道完成的百分比了。可是問題來了,我們如何知道上傳了多少了呢?答案肯定是要用一個變量來保存已經上傳的數據量。那這個變量要放在哪里才能讓我們既可以在進度頁面中訪問,又可以在http上傳模塊中訪問呢?

大家肯定知道一般情況下,用戶在多個頁面之間訪問,會用到session對象或url傳值來進行頁面之前的通信。但是前一篇所介紹的http模塊并不屬于一個頁面,因此我們無法簡單的應用session讓進度頁面與上傳模塊實現通信。這里主要還是借鑒高山來客的思路:首先構建一個用于存放文件信息的類,該類主要用來保存文件信息,如:文件名,路徑,當前上傳的數據量,上傳時間等。然后設置一個針對某次上傳的唯一id做為頁面中通信的暗號,擁有這個暗號的頁面才能獲取對應于某次上傳的文件信息。現在已經有了兩個變量了,接著就要使這兩個變量可以被多個頁面所使用,方法就是在上傳頁面中,將這個id變量注冊為該頁面的一個隱藏域,這樣包含這個頁面的http請求流中就會包含那個上傳id。另一個類變量就保存在頁面緩存cache中,并用上傳id做為其編號。

現在假設已經有了這么一個用于存放文件信息的類uploadfileinfo。

首先我們要在上傳頁面的pageload中new一個id,然后注冊一個隱藏域用來保存此id,同時實例化uploadfileinfo類,并將相應的信息寫入該類,最后把該類放入cache:

if (!ispostback)

{

uploadfileinfo ufi = new uploadfileinfo();

ufi.strfileguid = guid.newguid().tostring;//用guid來表示唯一的id;

ufi.strtempdir = server.mappath("tempupload/" + ufi.strfileguid + "//");

clientscript.registerhiddenfield("uploadid", ufi.strfileguid);//隱藏域,名字為uploadid,值為ufi.strfileguid

httpcontext.current.cache.add(ufi.strfileguid, ufi, null, datetime.now.adddays(10), timespan.zero, system.web.caching.cacheitempriority.high, null);//加入到catch中

}

經過以上步驟,我們就可以在http模塊中訪問了。

因為在這次的http請求流中包含了一個隱藏域,所以我們可以對獲取的http請求流進行分析,從而獲取相應的上傳id,也就是我們之前說的暗號。然后通過cache的編號找到cache中的文件信息對象,從而我們可以在后來的數據讀取過程中對該對象的上傳數據量進行修改。由于是放在cache中,加之是一個引用對象,所以對該對象修改后,其它代碼訪問到的都是最新的值。

string sguid = getuploadid(bpreloadedenititybody, econtentencode);//getuploadid是自己寫的一個方法用來從請求流中獲取上傳id

uploadfileinfo ufifileinfo = (uploadfileinfo)httpcontext.current.cache[sguid];//取出文件信息對象

其它頁面如果要使用這個對象就得先獲取id,之后就可以自由操作了。

2、進度的顯示

從圖中我們可以看到,當顯示進度的時候,背后的頁面成灰色,并且無法響應任何事件,有點類似模態窗口。這個效果大家可以在網上查查,還是挺容易實現的。我這里有一段js顯示此效果的代碼(搜集于網上):

modaldialog

function modaldialog(name,divid,width,height,leftop,topop,color)

{

this.name=name;//名稱

this.div=divid;//要放入窗體中的元素名稱

this.width=width;//窗體寬

this.height=height;//窗體高

this.leftop=leftop;//左側位置

this.topop=topop;//上部位置

this.color=color;//整體顏色

this.show=function()//顯示窗體

{

document.all(obj.name+"_divshow").style.width=obj.width;

document.all(obj.name+"_divshow").style.height=obj.height;

document.all(obj.name+"_divshow").style.left=obj.leftop;

document.all(obj.name+"_divshow").style.top=obj.topop;

document.all(obj.name+"_mask").style.width=document.body.clientwidth;

document.all(obj.name+"_mask").style.height=document.body.clientheight;

document.all(obj.name+"_divshow").style.visibility="visible";

document.all(obj.name+"_mask").style.visibility="visible";

}

this.close=function()//關閉窗體

{

document.all(obj.name+"_divshow").style.width=0;

document.all(obj.name+"_divshow").style.height=0;

document.all(obj.name+"_divshow").style.left=0;

document.all(obj.name+"_divshow").style.top=0;

document.all(obj.name+"_mask").style.width=0;

document.all(obj.name+"_mask").style.height=0;

document.all(obj.name+"_divshow").style.visibility="hidden";

document.all(obj.name+"_mask").style.visibility="hidden";

}

this.tostring=function()

{

var tmp="

"+this.name+"_divshow' style='position:absolute; left:0; top:0;z-index:10; visibility:hidden;width:0;height:0'>";

tmp+="";

tmp+="

"+this.name+"_content' valign=top >";

tmp+=""

tmp+="";

tmp+="

"+this.name+"_mask' style='position:absolute; top:0; left:0; width:0; height:0; background:#666; filter:alpha(opacity=50); z-index:9; visibility:hidden'>

document.write(tmp);

document.all(this.name+"_content").insertbefore(document.all(this.div));

}

var obj=this;

}

接著講我們的重點:如何實現定時局部刷新。

關于xmlhttprequest對象,我這里就不詳細講述了,提供大家一個關于此的手冊下載。為了大家更容易理解,我舉個小例子:

小例子

//頁面a.aspx

function returnresponse(url)

{

var xmlhttp = new activexobject('msxml2.xmlhttp');

if(xmlhttp!=null)

{

xmlhttp.open("get",url,true);//向url指定的頁面發送get請求

xmlhttp.onreadystatechange=function()

{//當xmlhttp的readystate改變的時候就會引發這個事件

if(xmlhttp.readystate==4&& xmlhttp.status == 200)

{ //4 = "成功發送",200 = "所請求的頁面返回正常"

temp=xmlhttp.responsetext;//接收所請求頁面發回的數據

alert(temp);

}

xmlhttp.send(null);

}

else

{

alert("瀏覽器不支持xmlhttp.");

}

//url所指向的頁面b的代碼.cs,當然也可以是同一個頁面的cs

if(request.querystring["event"]=="test")

{

response.write("測試");

}

/**//*

然后我們在a頁中執行returnresponse(b.aspx?event="test");

很快就會發現在a頁中彈出一個窗口,內容是"測試"。

通過以上小例子,大家應該已經對該對象有所了解了吧。為實現定時刷新,我把進度條單獨放在一個頁面中(如a.aspx),通過js的settimeout來定時執行類似returnresponse這樣的方法,然后在a.aspx.cs代碼中獲取文件信息對象,接著通過response來反饋進度信息。這樣在a.aspx頁面中就可以獲取到信息,并進行顯示了。但是執行activexobject將要花費不少代價,而且我們是定時執行該方法,顯然會造成性能下降。在參考了構建一個pool來管理無刷新頁面的xmlhttp對象后,決定采用這一方法,事實證明該方法確實有效。

利用pool后的代碼

function xmlhttppoolfactory()

{

this.xmlhttppool = new array();

this.maxpoollength = 10;

this.add=function()

{

if ( this.xmlhttppool.lengththis.maxpoollength )

{

xmlhttp=null;

if (window.xmlhttprequest)

{// code for all new browsers

xmlhttp=new xmlhttprequest();

}

else if (window.activexobject)

{// code for ie5 and ie6

try

{

xmlhttp = new activexobject('msxml2.xmlhttp');

}

catch(e)

{

try

{

xmlhttp = new activexobject('microsoft.xmlhttp');

}

catch(e2)

{

}

if ( xmlhttp!=null )

{

this.xmlhttppool.push(xmlhttp);

}

return xmlhttp;

}

};

this.getxmlhttp = function()

{

var xmlhttp = null;

var pool = this.xmlhttppool;

for ( var i=0 ; ipool.length ; ++i )

{

if ( pool[i].readystate == 4 || pool[i].readystate == 0 )

{

xmlhttp = pool[i];

break;

}

if ( xmlhttp == null )

{

return this.add();

}

return xmlhttp;

};

this.returnresponse= function(url,div)

{

var xmlhttp = this.getxmlhttp();

var param = div.split(',');

if(xmlhttp!=null)

{

xmlhttp.open("get",url,true);

xmlhttp.onreadystatechange=function()

{

if(xmlhttp.readystate==4&& xmlhttp.status == 200)

{ //4 = "loaded",200 = "ok"

temp=xmlhttp.responsetext;

var temparray = temp.split(",");

document.getelementbyid(param[0]).innertext=temparray[0];

document.getelementbyid(param[1]).innertext=temparray[1]+"kb/s";

document.getelementbyid(param[2]).innerhtml=""+temparray[2]*3+"'>

document.getelementbyid(param[3]).innertext=temparray[2]+"%";

}

xmlhttp.send(null);

}

else

{

alert("your browser does not support xmlhttp.");

}

};

this.aportall = function()

{

for ( var i=0 ; ithis.xmlhttppool.length ; ++i )

{

this.xmlhttppool[i].abort();

}

};

}

var a = new xmlhttppoolfactory();//建立一個全局的工廠實例

var strevent = "";

function refresh(url,interval,div)

{//該方法我用來定時刷新,因為除了settimeout還有一些其它活要干

var str1 = "";

for(i=2;iarguments.length;i++)

{//因為可能需要刷新的div不只一個,所以利用js的arguments來解決動態參數的問題

if(i!=arguments.length-1)

{

str1 = str1 +arguments[i]+",";

}

else

{

str1 = str1 +arguments[i];

}

a.returnresponse(url,str1);//調用該方法實現異部通信

var str="";

for(i=0;iarguments.length;i++)

{

if(i!=arguments.length-1)

str = str + "'"+arguments[i]+"',";

else

str = str+"'"+arguments[i]+"'";

}

settimeout("refresh("+str+")", interval );//定時執行該方法

}

到這就差不多整個專題都結束了,接下來幾天,我會把代碼稍微調整下,然后傳上來。

由于這段時間要上班,實在抽不出時間來整理,如果大家需要可以先拿去看看。不過代碼寫的有點亂,而且有些功能也沒有完善,時間實在太少,大家見諒。

粗糙的工程

綠色通道:好文要頂關注我收藏該文與我聯系

posted on 2008-08-04 16:35 stg609 閱讀(10474) 評論(56)編輯收藏

發表評論

2241253

回復引用查看

#1樓 2008-08-04 16:49 | netcorner

太復雜,用swfupload簡單多了!

回復引用查看

#2樓 2008-08-04 17:02 | 足夠有晉

樣子很漂亮。

回復引用查看

#3樓[樓主] 2008-08-04 17:07 | stg609

--引用--------------------------------------------------

netcorner: 太復雜,用swfupload簡單多了!

--------------------------------------------------------

恩,本人做這個主要還是為了學習。

回復引用查看

#4樓 2008-08-04 17:19 | 莫耶

slickupload早已解決這個問題了

呵呵~

回復引用

#5樓 2008-08-04 17:38 | xue[未注冊用戶]

學習!

回復引用查看

#6樓 2008-08-04 18:12 | 謙虛的天下

很好,很強大!

回復引用查看

#7樓 2008-08-04 19:50 | 藍色海岸線

不錯,學習了!

回復引用

#8樓 2008-08-04 20:31 | bucuo[未注冊用戶]

不錯,學習!

回復引用查看

#9樓 2008-08-05 04:12 | 怪怪

你這個系列很好, 把非swf的方案基本說到位了,過去像你這么完整的, 似乎只有英文文章～

頂一下

回復引用

#10樓 2008-08-05 08:55 | 1412[未注冊用戶]

學習了

回復引用查看

#11樓 2008-08-05 10:43 | 賴文華(swpu小賴)

頂一下!

回復引用

#12樓 2008-08-05 12:21 | 0574[未注冊用戶]

好文章,學習

回復引用

#13樓 2008-08-05 12:49 | 天天他[未注冊用戶]

發個完整的項目包試試呢.

回復引用查看

#14樓 2008-08-05 16:14 | martin(高超)

x效果不錯類

回復引用查看

#15樓 2008-08-05 17:19 | 隱姓埋名

lz `

你的包還沒整理好啊!

回復引用查看

#16樓[樓主] 2008-08-05 22:24 | stg609

實在抱歉呀,最近沒時間整理了,我已經把最原始的工程傳上去了,如果大家需要的話,可以去下。

回復引用

#17樓 2008-08-07 12:06 | scro[未注冊用戶]

好東西.謝謝樓主

回復引用查看

#18樓 2008-08-07 14:09 | 游俠_1

很鄙視一些人潑冷水,我相信樓主不會自己在項目運用這個東西,但我佩服樓主的鉆研精神,做這種東西不再于和別的(如swfupload之類比較),在于對新事務的學習與理解欽佩這種學習的態度

回復引用

#19樓 2008-08-07 17:16 | magic_lf[未注冊用戶]

樓主很強,佩服你的鉆研精神

回復引用

#20樓 2008-08-07 21:19 | topb[未注冊用戶]

支持樓主!!!

回復引用查看

#21樓 2008-08-18 16:20 | 藺文龍

實在是佩服樓主的鉆研精神,如今像樓主這樣有鉆研精神的人,真的不多了!

最近我也在研究這方面的東西

還是希望樓主百忙之中能抽時間,發份比較完整和完善的包供大家學習

回復引用查看

#22樓 2008-08-18 16:21 | 藺文龍

另外問一下

樓主有沒有在較正式的環境里測試過

上傳500m~1g左右的文件的效果?

回復引用查看

#23樓[樓主] 2008-08-18 21:39 | stg609

謝謝支持,不過目前實在是抽不出時間去整理,大家只好先將就下。另外你所指的正式環境是什么?由于條件有限,我目前只在本機測試過,上傳過400m多的視頻,沒有問題。500m以上未曾測試

回復引用查看

#24樓 2008-09-02 17:11 | 亦續緣

怎么沒看到你說的效果???

回復引用

#25樓 2008-09-03 17:26 | 蕭蕭落幕[未注冊用戶]

樓主啊,幫幫忙啊,找了好久的東西,被你寫的那好,對于我等菜鳥來說好東西啊,

搞了半天硬是沒在本機上運行起來,拜托樓主整理下,發到我的郵箱,最好是vs05的工程目錄,我剛學,見笑。。。

回復引用查看

#26樓[樓主] 2008-09-04 12:48 | stg609

謝謝支持,我提供給大家的這個就是完整的vs05的工程文件。不過,實在抱歉,目前還沒有精力去整理。

回復引用

#27樓 2008-09-11 19:26 | weir55[未注冊用戶]

博主,請教個問題

為什么我運行一直報0001錯誤啊

回復引用

#28樓 2008-09-16 09:18 | x-index[未注冊用戶]

寫的很清楚!

回復引用查看

#29樓 2008-09-26 11:13 | 時之砂

怎么有時候上傳不成功顯示0004,

我debug一開始停止,再上傳時debug

上傳時提示我不支持support xmlhttp,但是上傳成功了!

我的環境:vs2005; net2.0; asp.net ajax;繁體操作系統!

回復引用

#30樓 2008-11-25 10:34 | liwei783[未注冊用戶]

樓主,我下了代碼運行不了.老是說 if (ufi2.strextensionname == string.empty || ufi2.itotalbytes == 0)

{

response.redirect("uploadresult.aspx?info=error&code=" + errorcodes.err_0003);

}

對不起,由于網絡擁擠或服務器忙,暫時無法上傳,請稍后再試麻煩你發一份好的到我油箱可以嗎謝謝樓主

回復引用

#31樓 2008-12-15 15:58 | hoho[未注冊用戶]

不錯啊.樓主是好人,做人很厚道,還把源碼提供給大家,好人也!支持你!寫的很好!

回復引用

#32樓 2008-12-15 16:01 | hoho[未注冊用戶]

對于一些人說自己已經解決了,比什么什么的差,那我覺得你完全沒必要過來看!頂樓主!

回復引用

#33樓 2008-12-15 17:50 | hoho[未注冊用戶]

樓主,我可以上傳,但進度條不動的,百分比也不動的,怎么回事呢?請賜教!

回復引用

#34樓 2008-12-22 23:26 | amywen[未注冊用戶]

請問一下樓主,源碼在哪下?能否發我郵箱,我找好久了.謝謝了!

回復引用查看

#35樓 2009-01-14 14:44 | yinix

樓主:很好,很強大,頂力支持!!!

回復引用

#36樓 2009-02-04 22:56 | woradmen[未注冊用戶]

可以發一份完整的給我嗎,謝謝樓主了

回復引用

#37樓 2009-02-11 17:14 | 一個程序員[未注冊用戶]

不知道作者有沒試過,附帶的那個源碼,不能上傳小的文件,傳上去都是空的

回復引用

#38樓 2009-04-24 13:25 | 感恩[未注冊用戶]

不錯愛益淺,太感謝了,現在也正在做一個要上傳大文件的網站

再次謝謝了

回復引用

#39樓 2009-05-05 18:09 | 很好很強大[未注冊用戶]

不錯我看過一個例子沒你這個復雜感覺用濾鏡做這個進度條顯示不錯

回復引用

#40樓 2009-05-08 08:55 | 謝謝[未注冊用戶]

整個項目在哪兒啊?

回復引用

#41樓 2009-05-08 23:25 | 黎族[未注冊用戶]

樓主,請問.我拿來用時就

var temparray = temp.split(",");

document.getelementbyid(param[0]).innertext=temparray[0];

報錯,說.

microsoft jscript 運行時錯誤: 'document.getelementbyid(...)' 為空或不是對象

怎么回事啊.

回復引用

#42樓 2009-05-10 01:22 | bleachli

lz:我用你那個調試一直都有問題.,可不可以發一個你修改了的給我,,發到我郵箱里..謝謝..急啊,,我現在很想學那個東西..

回復引用

#43樓 2009-06-09 16:36 | luguo[未注冊用戶]

要是能多寫點注釋就好了,對于我這種初學者來說!!

回復引用查看

#44樓 2009-10-09 13:40 | feiyang

請教樓主一個問題,我運行源碼,在ie8下面彈出框沒有,而提示頁面找不到?請問這是什么原因?

回復引用查看

#45樓 2009-10-11 15:45 | json-leaf

好帖要留名

回復引用

#46樓 2009-10-12 17:04 | fdgdf[未注冊用戶]

首先感謝樓主!但有一個小問題,就是我在測試中,上傳文件時進度條沒有數據顯示,我跟蹤代碼發現,在settimeout函數去刷新uploadprogress這個頁面時,調用不到uploadprogress頁面的page_load(),請問這是為什么?

回復引用查看

#47樓 2009-11-30 18:34 | joylee

絕對的好文,只知道用別人封裝好的東西,而不去想實現的原理怎么能進步

回復引用查看

#48樓 2010-04-29 22:55 | 郭志良

下載下來的源碼怎么那么多錯誤啊我是菜鳥,調了老半天也沒整好, 有更完整的版本嗎? 能發給我嗎?真的很需要。。。

我郵箱:shengxiwgzly@139.com

謝謝了!!!!!

回復引用查看

#49樓 2010-05-28 11:19 | plcc

樓主,我下了代碼運行不了.老是說 if (ufi2.strextensionname == string.empty || ufi2.itotalbytes == 0)

{

response.redirect("uploadresult.aspx?info=error&code=" + errorcodes.err_0003);

}

對不起,由于網絡擁擠或服務器忙,暫時無法上傳,請稍后再試麻煩你發一份好的到我油箱可以嗎謝謝樓主

274947209@qq.com

回復引用查看

#50樓 2010-07-21 18:02 | 水淼

我用的vs08的怎么轉移過來后直接配置文件就錯了

“/myuploadweb”應用程序中的服務器錯誤。

怎么回事啊,能不能提供個web項目的,不是網站的。

回復引用查看

#51樓 2011-01-29 22:41 | 夜之悲哀

對于大文件或者網速慢時,上傳過程瀏覽器的狀態肯定會出現等待進度條,這個怎么去掉?

回復引用查看

#52樓 2011-08-14 23:32 | xiawei

樓主呀,現在有整理好的源碼嗎,能給我一份學習用嗎?xiawei_hi@126.com

回復引用查看

#53樓 2011-09-01 17:51 | xin_0623

樓主,能傳給我一份源碼嗎?學習一下,謝謝~394663393@qq.com

回復引用查看

#54樓 2011-09-19 18:39 | 飛雪連天射白鹿

我也想源碼,,,最近在弄這個東西!

25445828@qq.com

回復引用查看

#55樓 2011-09-29 13:52 | xiaosanlun

uploadfileinfo????源碼給一份

回復引用查看

#56樓 2011-11-11 15:30 | 木易王子

非常好的東西,樓主,

您的粗糙的工程,我下了個,配置好了,能運行,可傳不上東西,

老師報錯,不知道哪里配錯了,能發份2010的項目源碼給我嗎,

yj1981223@sina.com

注冊用戶登錄后才能發表評論,請登錄或注冊,返回博客園首頁。

首頁博問閃存新聞園子招聘知識庫

總結

以上是生活随笔為你收集整理的Asp.Net 上传大文件专题(4)--利用ajax技术显示上传进度的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：对c语言课程的总结和认识,c语言课程设计
下一篇：个人求职简历(.Net)--求广州暑期实