|
|
代碼下載：http://files.cnblogs.com/n-pei/mvcfileupload.zip
最近因?yàn)門eamVideo需要用到視頻和圖片上傳功能，所以試著Google了很多資料，和大家分享下。
1．最基本的文件上傳
在View界面通過Form把數(shù)據(jù)POST到控制端(Controller)，Controller把文件存儲到服務(wù)器，再Redirect到其他頁面。
View部分的代碼：
Controller部分需要判斷是否有Post過來文件，有文件就保存，再重定向到index頁面。
上面的例子是最簡單的，下一步我們考慮給它加上一個(gè)jQuery的UI，讓上傳文件時(shí)的樣子變成如下：
要達(dá)到這個(gè)效果，首先需要下載jQuery UI的幾個(gè)插件。
在模板中添加這些腳本:
把上面實(shí)現(xiàn)的簡單的文件上傳放到一個(gè)DIV中，我們需要實(shí)現(xiàn)的功能是當(dāng)鼠標(biāo)點(diǎn)擊某個(gè)按鈕時(shí)，這個(gè)DIV會彈出來。
最后是DIV彈出的腳本:
接下來我們考慮把圖片上傳到服務(wù)器后再讓它顯示在當(dāng)前頁面中。顯示的效果如下:
也就是說我們在上傳圖片到服務(wù)器端后，需要得到此圖片的創(chuàng)建時(shí)間，大小名稱等。
FileRepository把文件的信息放到一個(gè)List中：
通過Controller部分把這個(gè)List傳遞給View。View部分的代碼請參考附件。對于圖片的存儲，我下一步想著把它存儲在數(shù)據(jù)庫中。首先是創(chuàng)建表結(jié)構(gòu)：
使用ADO.NET Data Model來存儲數(shù)據(jù),所以我們需要?jiǎng)?chuàng)建一個(gè)edmx文件。
保存到圖片到數(shù)據(jù)庫中的Controller部分：
View部分代碼：
過程如下圖：
這里需要一個(gè)輔助類來幫助輸入文本的Post。你可以在下載的代碼中看到。上傳圖片并保存到數(shù)據(jù)庫中，我們還需要來把圖片顯示出來，這個(gè)相對來說就比較麻煩了。搜索了很久才找到的方法如下：
保存圖片到數(shù)據(jù)庫后的查詢結(jié)果：
目前我還不知道如何把一個(gè)List的圖片顯示出來。希望誰能夠提供一個(gè)好的解決方案。傳統(tǒng)的方法來存儲文件(圖片)上面的介紹已經(jīng)很多了。如何使用AJAX方法來存儲文件到服務(wù)器呢？我搜索了下，比較多的是使用jQuery Form這個(gè)插件來實(shí)現(xiàn)的。
你需要去下載jQuery Form這個(gè)插件，放到你的Script文件夾中。并在Master模板中添加。當(dāng)你點(diǎn)擊Button時(shí)，創(chuàng)建一個(gè)Form并使用AJAX方式POST到服務(wù)器端保存。保存方式就不說了，下面是使用jQuery Form的JS代碼：
除了使用jQuery form這個(gè)插件還有其他的AJAX方式實(shí)現(xiàn)文件的上傳：
我舉兩個(gè)例子：
1. jQuery & Flash AJAX上傳文件
代碼地址：http://swfupload.googlecode.com/
主要是通過Flash和js的交互用flash程序來post數(shù)據(jù)到后臺的Controller。除了flash部分，其它的和上面介紹的代碼大同小異。我會在代碼包里放上這部分的代碼，供大家下載。
效果：
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)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時(shí)間聯(lián)系我們修改或刪除，多謝。
