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

　　最近因?yàn)門eamVideo需要用到視頻和圖片上傳功能，所以試著Google了很多資料，和大家分享下。

　　1．最基本的文件上傳

　　在View界面通過(guò)Form把數(shù)據(jù)POST到控制端(Controller)，Controller把文件存儲(chǔ)到服務(wù)器，再Redirect到其他頁(yè)面。

　　View部分的代碼：

　　Controller部分需要判斷是否有Post過(guò)來(lái)文件，有文件就保存，再重定向到index頁(yè)面。

　　上面的例子是最簡(jiǎn)單的，下一步我們考慮給它加上一個(gè)jQuery的UI，讓上傳文件時(shí)的樣子變成如下：

　　要達(dá)到這個(gè)效果，首先需要下載jQuery UI的幾個(gè)插件。

　　在模板中添加這些腳本:

　　把上面實(shí)現(xiàn)的簡(jiǎn)單的文件上傳放到一個(gè)DIV中，我們需要實(shí)現(xiàn)的功能是當(dāng)鼠標(biāo)點(diǎn)擊某個(gè)按鈕時(shí)，這個(gè)DIV會(huì)彈出來(lái)。

　　最后是DIV彈出的腳本:

　　接下來(lái)我們考慮把圖片上傳到服務(wù)器后再讓它顯示在當(dāng)前頁(yè)面中。顯示的效果如下:

　　也就是說(shuō)我們?cè)谏蟼鲌D片到服務(wù)器端后，需要得到此圖片的創(chuàng)建時(shí)間，大小名稱等。

　　FileRepository把文件的信息放到一個(gè)List中：

　　通過(guò)Controller部分把這個(gè)List傳遞給View。View部分的代碼請(qǐng)參考附件。對(duì)于圖片的存儲(chǔ)，我下一步想著把它存儲(chǔ)在數(shù)據(jù)庫(kù)中。首先是創(chuàng)建表結(jié)構(gòu)：

　　使用ADO.NET Data Model來(lái)存儲(chǔ)數(shù)據(jù),所以我們需要?jiǎng)?chuàng)建一個(gè)edmx文件。

　　保存到圖片到數(shù)據(jù)庫(kù)中的Controller部分：

　　View部分代碼：

　　過(guò)程如下圖：

　　這里需要一個(gè)輔助類來(lái)幫助輸入文本的Post。你可以在下載的代碼中看到。上傳圖片并保存到數(shù)據(jù)庫(kù)中，我們還需要來(lái)把圖片顯示出來(lái)，這個(gè)相對(duì)來(lái)說(shuō)就比較麻煩了。搜索了很久才找到的方法如下：

　　保存圖片到數(shù)據(jù)庫(kù)后的查詢結(jié)果：

　　目前我還不知道如何把一個(gè)List的圖片顯示出來(lái)。希望誰(shuí)能夠提供一個(gè)好的解決方案。傳統(tǒng)的方法來(lái)存儲(chǔ)文件(圖片)上面的介紹已經(jīng)很多了。如何使用AJAX方法來(lái)存儲(chǔ)文件到服務(wù)器呢？我搜索了下，比較多的是使用jQuery Form這個(gè)插件來(lái)實(shí)現(xiàn)的。

　　你需要去下載jQuery Form這個(gè)插件，放到你的Script文件夾中。并在Master模板中添加。當(dāng)你點(diǎn)擊Button時(shí)，創(chuàng)建一個(gè)Form并使用AJAX方式POST到服務(wù)器端保存。保存方式就不說(shuō)了，下面是使用jQuery Form的JS代碼：

　　除了使用jQuery form這個(gè)插件還有其他的AJAX方式實(shí)現(xiàn)文件的上傳：

　　我舉兩個(gè)例子：

　　1. jQuery & Flash AJAX上傳文件

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

　　主要是通過(guò)Flash和js的交互用flash程序來(lái)post數(shù)據(jù)到后臺(tái)的Controller。除了flash部分，其它的和上面介紹的代碼大同小異。我會(huì)在代碼包里放上這部分的代碼，供大家下載。

　　效果：

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

　　這個(gè)推薦大家看一下。

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

　　參考資料：

　　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技術(shù)：探索Asp.net mvc 的文件上傳(由淺入深)，轉(zhuǎn)載需保留來(lái)源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。