[ASP.NET] 檔案上傳 - NeatUpload - 顯示上傳比例 (ProgressBar) | 黃昏的甘蔗 - 點部落

2012-03-16

[ASP.NET] 檔案上傳 - NeatUpload - 顯示上傳比例 (ProgressBar)

5040
0
ASP.NET

具有 progressbar 的檔案上傳

關於 ASP.NET 的檔案上傳，之前曾說到使用 VS.NET 的本身元件Fileupload 就可以輕鬆完成檔案上傳功能「ASP.Net 修改檔案上傳的大小限制 - web.config」、「『ASP.NET』同時多檔案上傳 - 使用 FileUpload 元件」。那～這篇還有啥好講的呢？重點在於，在傳送的過程中，你怎麼知道檔案傳輸的完成百分比呢？我們今天就用 3-party 的元件「NeatUpload」來完成這項功能。

環境 VS.NET 2010
套件「NeatUpload」下載「點」，目前為 1.3.26 版
官方說明：The NeatUpload ? ASP.NET component allows developers to stream uploaded files to storage (filesystem or database) and allows users to monitor upload progress. It is open source and works under Mono's XSP/mod_mono as well as Microsoft's ASP.NET implementation.

所需要的步驟

下載「NeatUpload」並解壓縮（解開後會有兩個子目錄，一個為 bin 另一個為 NeatUpload）
開啟 VS.NET 專案
將解壓縮後的 NeatUpload "子"目錄複製到你的專案目錄下
VS.NET 專案加入參考「Brettle.Web.NeatUpload.dll」，選取剛剛 bin 子目錄下的檔案。
安裝 NeatUpload 套件到 VS.NET 的工具箱裡
更改 web.config ，增加 httpModules 片段
前端 aspx 的程式碼
後端 aspx.cs 的程式碼
建立上傳的資料夾
測試

上述 1～4步驟請自行操作無圖說。

5.安裝 NeatUpload 套件到 VS.NET 的工具箱裡

-1. 先增加一個索引標籤（如下圖的自定）
-2. 到新增的索引標籤再按右鍵選擇「選擇項目」

-3. 點選瀏覽按鈕，找到 dll 檔案位置

-4. 選擇 bin 子目錄下的「Brettle.Web.NeatUpload.dll」

-5. 這時新增的索引標籤，就會增加了 7 個元件供你使用

6. 更改 web.config ，增加 httpModules 片段
請注意：底下這段是加到 <system.web> 區塊裡面的

maxRequestLength="500000" 是限制最大的傳輸大小 (ref.) 單位是 KB，但～～改了沒用，還是可以輕鬆傳送超過此大小的檔案.....ㄝ～這個還在測試當中。

<httpModules>
 <add name="UploadHttpModule" type="Brettle.Web.NeatUpload.UploadHttpModule, Brettle.Web.NeatUpload" />
</httpModules>
<httpRuntime maxRequestLength="500000" executionTimeout="3600" />

7. 前端 aspx 的程式碼

-1. 在版面區塊<body>拉入「InputFile」與「ProgressBar」元件

-2. 再增加個「Upload」按鈕，此項是 .NET 基本元件

-3. 修改增加 ProgressBar 的屬性（注意：下方的 Button1 名稱需對應 Upload 按鈕的ID），Inline="true" 是必要的唷！

<Upload:ProgressBar ID="ProgressBar1" runat="server" Inline="true" Width="450px" Height="45px" Triggers="Button1"/>

8. 後端 aspx.cs 的程式碼

後端程式碼很單純就是只要下面這一段位在 Button1 裡的片段，提供圖片與程式碼給大家看（其實是一樣的，只是圖片是有顏色的 code）

protected void Button1_Click(object sender, EventArgs e)
{
 if (InputFile1.HasFile)
 {
 string FileName = this.InputFile1.FileName;
 //取得 InputFile1 裡的檔案名稱
 string ExtenName = System.IO.Path.GetExtension(FileName);
 string MainName = System.IO.Path.GetFileNameWithoutExtension(FileName);
 //取得 InputFile1 的副檔名
 string SaveFileName = System.IO.Path.Combine(System.Web.HttpContext.Current.Request.MapPath("UpLoads/"), MainName+"_"+DateTime.Now.ToString("yyyyMMddhhmmffff") + ExtenName);
 // 存到伺服器上以 // 主檔名_年月日時分毫秒.副檔名 ex:A.jpg -> A_2012031512090308.jpg
 InputFile1.MoveTo(SaveFileName, Brettle.Web.NeatUpload.MoveToOptions.Overwrite);
 // 檔案上傳
 // 若檔名相同會被覆蓋
 float FileSize = (float)System.Math.Round((float)InputFile1.ContentLength / 1024000, 1);
 //以 Mega 為計算單位
 }
}

9. 建立上傳的資料夾 UpLoads

在步驟8 的 10-th 行寫到「System.Web.HttpContext.Current.Request.MapPath("UpLoads/")」，雖咱在這行的用意是存到某一個字串變數去，但最後 InputFile1.MoveTo 時，他就會直接寫入到該資料夾 UpLoads。

至於為何要用 System.Web.HttpContext.Current.Request.MapPath 這個功能？此功能會把 .NET 專案路徑轉化為實際在 Server 上存放的路徑，所以那一段會等於 .NET 專案路徑下的 UpLoads 目錄。

10. 測試.....整個過程都說完啦～～

就換你去試試看囉

～ End

回首頁