具有 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