代碼下載：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/

NET技術：探索Asp.net mvc 的文件上傳(由淺入深)，轉載需保留來源！

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。