前幾天，寫過一篇隨筆“使用RESPONSE.WRITE實(shí)現(xiàn)在頁(yè)面的生命周期中前后臺(tái)的交互”。說是交互，實(shí)際上也主要是在asp.net的頁(yè)面周期中 從后臺(tái)利用RESPONSE.WRITE向前臺(tái)即時(shí)的推送內(nèi)容。
該篇隨筆算是對(duì)上一篇文章的實(shí)際應(yīng)用，利用RESPONSE.WRITE的這個(gè)特性實(shí)現(xiàn)上傳文件時(shí)實(shí)時(shí)進(jìn)度的顯示。如對(duì) RESPONSE.WRITE/RESPONSE.FLUSH不甚了解，請(qǐng)先移步這里。
先附上示例代碼MultiUploadPRogressClassic。
提前聲明一點(diǎn)，HTML發(fā)展到5，使用web API及jQuery upload插件能很好的實(shí)現(xiàn)很炫的上傳進(jìn)度條效果。但該隨筆只針對(duì)那些不能支持HTML5 的瀏覽器，如IE8及以下，而又不想借助于Flash等來實(shí)現(xiàn)的場(chǎng)景。你也可以說今天要描述的方法有些過時(shí)了。至于HTML5下實(shí)現(xiàn)的方法，本人近期有時(shí)間會(huì)另寫一篇隨筆。
言歸正傳。
我們要實(shí)現(xiàn)的頁(yè)面的基本布局是這樣的。
上傳開始，便顯示每文件的實(shí)時(shí)進(jìn)度。如下圖。
上傳結(jié)束后，再次恢復(fù)頁(yè)面基本布局。
在HTML5之前，通過web file控件上傳的文件只有同步post到server端才可以被識(shí)別和讀取。在此之前，client端是無法知曉文件內(nèi)容的。所 以，文件上傳的真實(shí)狀態(tài)只能從后臺(tái)傳遞到前端顯示，這時(shí)，我們就要借助RESPONSE.WRITE了。
首先，在文件真正的被server端讀取之前，要根據(jù)上傳的情況向前端繪制初始進(jìn)度（0%）。其次，在讀取的過程中，周期性向前端推送進(jìn)度 情況。主流程如下。
上傳文件的初始進(jìn)度
Request.Files攜帶著文件內(nèi)容到達(dá)了server端，在開始讀取之前，通過RESPONSE.WRITE向頁(yè)面繪制初始狀態(tài)。
1 public void CreateProgress(HttpFileCollection fileCollection) 2 { 3 StringBuilder sbProgress = new StringBuilder(); 4 sbProgress.Append("<html><head></head> <body>"); //構(gòu)造輸出內(nèi)容 5 sbProgress.Append("<script src='FilesUpload.js' type='text/javascript'></script><table id='mainTable' border='0'>"); 6 for (int i = 0; i < fileCollection.Count; i++) 7 { 8 string strProgressBarId = "progressBar" + i; 9 string strPercentageId = "percentage" + i;10 string fileName = fileCollection[i].FileName;11 sbProgress.Append("<tr><td>");12 sbProgress.Append("<p style = 'float:left; margin-left:0px; margin-right:10px;'>" + fileName + "</p>");13 sbProgress.Append("<div style='background-color:White; width: 100px;height:12px; border-color:Black;border-width:thin;border-style:solid;float:left; margin-left:0px; margin-right:10px'>");14 sbProgress.Append("<div style='background-color:Green;height:12px;' id='" + strProgressBarId + "' ></div></div>");15 sbProgress.Append("<p float:left; margin-left:0px; margin-right:10px;'><div id='" + strPercentageId + "'></div></p>");16 sbProgress.Append("</td></tr>");17 }18 sbProgress.Append("</table>");19 for (int i = 0; i < fileCollection.Count; i++)20 {21 sbProgress.Append("<script type='text/Javascript'> SetProgressBarProgressAmount(" + i + ",0 );</script>");22 }23 sbProgress.Append("</body></html>");24 25 HttpContext.Current.Response.Write(sbProgress.ToString());26 HttpContext.Current.Response.Flush(); //強(qiáng)制輸出內(nèi)容27 }初始進(jìn)度繪制文件進(jìn)度更新
從上面的代碼段可以看出，設(shè)置上傳進(jìn)度值是通過調(diào)用js方法SetProgressBarProgressAmount來實(shí)現(xiàn)的。在文件的讀取過程中，實(shí)時(shí)的進(jìn)度 也通過該方法更新到前端。
1 public static void setProgressBar(int id, string progressAmount)2 {3 StringBuilder sb = new StringBuilder();4 sb.Append("<body><script type='text/javascript'>SetProgressBarProgressAmount(" + id + ",'" + progressAmount + "'); </script></body>");5 6 HttpContext.Current.Response.Write(sb.ToString());7 HttpContext.Current.Response.Flush();8 }實(shí)時(shí)進(jìn)度更新更新進(jìn)度方法是每讀取完一定大小的文件內(nèi)容后執(zhí)行一次。
1 while ((tripDownloadSize = stream.Read(b, 0, bufferSize)) > 0)2 {3 fs.Write(b, 0, tripDownloadSize);4 totalDownloadedSize += tripDownloadSize;5 Percentage = (int)(totalDownloadedSize * 100) / totalUploadSize;6 setProgressBar(id, Percentage.ToString()); //更新進(jìn)度7 System.Threading.Thread.Sleep(100);8 }調(diào)用進(jìn)度更新最后，還有一點(diǎn)需要說明一下。我們把包含web file控件的區(qū)域放到一個(gè)新的頁(yè)面里，并通過Iframe引用。這樣做是為避免每次都post整個(gè) 頁(yè)面。
好了，本篇完結(jié)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
