應(yīng)用Response.Write實(shí)現(xiàn)帶有進(jìn)度條的多文件上傳_.Net教程

教程Tag：暫無(wú)Tag,歡迎添加,賺取U幣!

推薦：asp.net用cookie保存用戶密碼自動(dòng)登錄
本文來(lái)學(xué)習(xí)一下如何在asp.net中用cookie保存用戶的帳戶密碼實(shí)現(xiàn)自動(dòng)登錄的功能，強(qiáng)調(diào)一下，cookie在客戶端保存，是不安全的，推薦使用md5加密保存。 asp.net 中，使用cookie保存賬號(hào)密碼、自動(dòng)登錄創(chuàng)建cookie //向客戶端寫(xiě)入Cookie HttpCookie hcUserName1 = new Http

本教程來(lái)學(xué)習(xí)asp.net利用RESPONSE.WRITE的這個(gè)特性實(shí)現(xiàn)上傳文件時(shí)實(shí)時(shí)進(jìn)度的顯示，本文的學(xué)習(xí)重點(diǎn)是asp.net頁(yè)面的生命周期中前后臺(tái)的交互。

前幾天，寫(xiě)過(guò)一篇隨筆“使用RESPONSE.WRITE實(shí)現(xiàn)在頁(yè)面的生命周期中前后臺(tái)的交互”。說(shuō)是交互，實(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不甚了解，可以先百度一下。

提前聲明一點(diǎn)，HTML發(fā)展到5，使用web API及jQuery upload插件能很好的實(shí)現(xiàn)很炫的上傳進(jìn)度條效果。但該隨筆只針對(duì)那些不能支持HTML5

的瀏覽器，如IE8及以下，而又不想借助于Flash等來(lái)實(shí)現(xiàn)的場(chǎng)景。你也可以說(shuō)今天要描述的方法有些過(guò)時(shí)了。至于HTML5下實(shí)現(xiàn)的方法，本人

近期有時(shí)間會(huì)另寫(xiě)一篇隨筆。

言歸正傳。

我們要實(shí)現(xiàn)的頁(yè)面的基本布局是這樣的。

應(yīng)用Response.Write實(shí)現(xiàn)帶有進(jìn)度條的多文件上傳模板無(wú)憂

上傳開(kāi)始，便顯示每文件的實(shí)時(shí)進(jìn)度。如下圖。

應(yīng)用Response.Write實(shí)現(xiàn)帶有進(jìn)度條的多文件上傳

上傳結(jié)束后，再次恢復(fù)頁(yè)面基本布局。

在HTML5之前，通過(guò)web file控件上傳的文件只有同步post到server端才可以被識(shí)別和讀取。在此之前，client端是無(wú)法知曉文件內(nèi)容的。所

以，文件上傳的真實(shí)狀態(tài)只能從后臺(tái)傳遞到前端顯示，這時(shí)，我們就要借助RESPONSE.WRITE了。

首先，在文件真正的被server端讀取之前，要根據(jù)上傳的情況向前端繪制初始進(jìn)度(0%)。其次，在讀取的過(guò)程中，周期性向前端推送進(jìn)度

情況。主流程如下。

應(yīng)用Response.Write實(shí)現(xiàn)帶有進(jìn)度條的多文件上傳

上傳文件的初始進(jìn)度

Request.Files攜帶著文件內(nèi)容到達(dá)了server端，在開(kāi)始讀取之前，通過(guò)RESPONSE.WRITE向頁(yè)面繪制初始狀態(tài)。

public void CreateProgress(HttpFileCollection fileCollection)
    {
        StringBuilder sbProgress = new StringBuilder();
        sbProgress.Append("<html><head></head> <body>");       //構(gòu)造輸出內(nèi)容
        sbProgress.Append("<script src='FilesUpload.js' type='text/javascript'></script><table id='mainTable' border='0'>");
        for (int i = 0; i < fileCollection.Count; i++)
        {
            string strProgressBarId = "progressBar" + i;
            string strPercentageId = "percentage" + i;
            string fileName = fileCollection[i].FileName;
            sbProgress.Append("<tr><td>");
            sbProgress.Append("<p style = 'float:left; margin-left:0px; margin-right:10px;'>" + fileName + "</p>");
            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'>");
            sbProgress.Append("<div style='background-color:Green;height:12px;' id='" + strProgressBarId + "' ></div></div>");
            sbProgress.Append("<p float:left; margin-left:0px; margin-right:10px;'><div id='" + strPercentageId + "'></div></p>");
            sbProgress.Append("</td></tr>");
        }
        sbProgress.Append("</table>");
        for (int i = 0; i < fileCollection.Count; i++)
        {
            sbProgress.Append("<script type='text/javascript'> SetProgressBarProgressAmount(" + i + ",0 );</script>");
        }
        sbProgress.Append("</body></html>");

        HttpContext.Current.Response.Write(sbProgress.ToString());
        HttpContext.Current.Response.Flush();       //強(qiáng)制輸出內(nèi)容
    }

文件進(jìn)度更新

從上面的代碼段可以看出，設(shè)置上傳進(jìn)度值是通過(guò)調(diào)用js方法SetProgressBarProgressAmount來(lái)實(shí)現(xiàn)的。在文件的讀取過(guò)程中，實(shí)時(shí)的進(jìn)度

也通過(guò)該方法更新到前端。

分享：asp.net如何將后臺(tái)c#數(shù)組傳給前臺(tái)js？
如何把后臺(tái)的c#數(shù)組傳給前端的js，所以這個(gè)問(wèn)題困擾了很久，后來(lái)在一篇文章中看到解決辦法，文章中的方法處理的是定長(zhǎng)數(shù)組，我現(xiàn)在處理的是不定長(zhǎng)的，所以我又在文章的基礎(chǔ)上修改了一下。自己親自的實(shí)踐了一下并應(yīng)用在自己的程序中，果然解決了問(wèn)題。現(xiàn)在結(jié)合大牛的文