探索Asp.net mvc 的檔案上傳(由淺入深)__.net

原文連結

代碼下載：http://files.cnblogs.com/n-pei/mvcfileupload.zip

最近因為TeamVideo需要用到視頻和圖片上傳功能，所以試著Google了很多資料，和大家分享下。

1．最基本的檔案上傳。

在View介面通過Form把資料POST到控制端(Controller)，Controller把檔案儲存體到伺服器，再Redirect到其他頁面。

View部分的代碼：

Controller部分需要判斷是否有Post過來檔案，有檔案就儲存，再重新導向到index頁面。

上面的例子是最簡單的，下一步我們考慮給它加上一個jQuery的UI，讓上傳檔案時的樣子變成如下：

要達到這個效果，首先需要下載jQuery UI的幾個外掛程式。

在模板中添加這些指令碼:

把上面實現的簡單的檔案上傳放到一個DIV中，我們需要實現的功能是當滑鼠點擊某個按鈕時，這個DIV會彈出來。

最後是DIV彈出的指令碼:

接下來我們考慮把圖片上傳到伺服器後再讓它顯示在當前頁面中。顯示的效果如下:

也就是說我們在上傳圖片到伺服器端後，需要得到此圖片的建立時間，大小名稱等。

FileRepository把檔案的資訊放到一個List中：

通過Controller部分把這個List傳遞給View。

View部分的代碼請參考附件。

對於圖片的儲存，我下一步想著把它儲存在資料庫中。

首先是建立表結構：

使用ADO.NET Data Model來儲存資料,所以我們需要建立一個edmx檔案。

儲存到圖片到資料庫中的Controller部分：

View部分代碼：

過程如下圖：

這裡需要一個輔助類來協助輸入文本的Post。你可以在下載的代碼中看到。

上傳圖片並儲存到資料庫中，我們還需要來把圖片顯示出來，這個相對來說就比較麻煩了。

搜尋了很久才找到的方法如下：

儲存圖片到資料庫後的查詢結果：

目前我還不知道如何把一個List的圖片顯示出來。希望誰能夠提供一個好的解決方案。

傳統的方法來隱藏檔(圖片)上面的介紹已經很多了。如何使用AJAX方法來隱藏檔到伺服器呢。

我搜尋了下，比較多的是使用jQuery Form這個外掛程式來實現的。

你需要去下載jQuery Form這個外掛程式，放到你的Script檔案夾中。並在Master模板中添加。

當你點擊Button時，建立一個Form並使用AJAX方式POST到伺服器端儲存。儲存方式就不說了，下面是使用jQuery Form的JS代碼：

除了使用jQuery form這個外掛程式還有其他的AJAX方式實現檔案的上傳：

我舉兩個例子：

1. jQuery & Flash AJAX上傳檔案。

代碼地址：http://swfupload.googlecode.com/

主要是通過Flash和js的互動用flash程式來post資料到背景Controller。

除了flash部分，其它的和上面介紹的代碼大同小異。我會在程式碼封裝裡放上這部分的代碼，供大家下載。

效果：

2. 純jQueryAJAX上傳檔案(http://valums.com/ajax-upload/)

這個推薦大家看一下。

看這邊文章的同仁們，周末愉快，呵呵。

參考資料：

http://weblogs.asp.net/imranbaloch/archive/2010/04/03/image-preview-in-asp-net-mvc.aspx、

http://weblogs.asp.net/jgalloway/archive/2008/01/08/large-file-uploads-in-asp-net.aspx

http://www.highoncoding.com/Articles/689_Uploading_and_Displaying_Files_Using_ASP_NET_MVC_Framework.aspx

http://www.mikesdotnetting.com/Article/125/ASP.NET-MVC-Uploading-and-Downloading-Files

http://valums.com/ajax-upload/

Cheers