先看看效果(下面gif動(dòng)畫(huà)制作有點(diǎn)大，5.71MB)：

題外話：上面選擇圖片來(lái)源于Insus.NET的新浪微博，言歸正傳，由于以前的asp.net mvc的練習(xí)文件上傳文件，顯示或是下載等博文，均是存儲(chǔ)于站點(diǎn)目錄之中。這次練習(xí)是把圖片存儲(chǔ)于數(shù)據(jù)庫(kù)，也就是以圖片的數(shù)據(jù)流存儲(chǔ)，在上傳時(shí)我們需要把文件處理為數(shù)據(jù)庫(kù)，顯示時(shí)，我們需要把數(shù)據(jù)流處理為文件。

一看上面的演示，我們還會(huì)看到一個(gè)預(yù)覽區(qū)。選擇圖片時(shí)，預(yù)覽區(qū)會(huì)預(yù)先顯示選擇圖片。確認(rèn)正確之后，我們?cè)偕蟼髦翑?shù)據(jù)庫(kù)中。

使用下面SQL語(yǔ)句創(chuàng)建表[dbo].[ImageStore]，存儲(chǔ)過(guò)程2個(gè)[dbo].[usp_ImageStore_Insert]和[dbo].[usp_ImageStore_GetAll]:

根據(jù)數(shù)據(jù)表，我們需要在asp.net mvc的models目錄中創(chuàng)建一個(gè)mode，習(xí)慣性是以數(shù)據(jù)表來(lái)創(chuàng)建:

由于我們還要處理程序與數(shù)據(jù)庫(kù)之間的交流，創(chuàng)建一個(gè)Entity，兩個(gè)方法，一是獲取所有數(shù)據(jù)，另一個(gè)是為添加數(shù)據(jù)所準(zhǔn)備:

上面的Entity中，有兩個(gè)標(biāo)記。
標(biāo)記2，Insus.NET有寫(xiě)成一個(gè)Utility，也就是說(shuō)把DataTable轉(zhuǎn)換為L(zhǎng)ist<T>的工具，其實(shí)有以前的asp.net mvc也有提及或是代碼分享，在此你不必再費(fèi)時(shí)費(fèi)心去搜索，參考下面代碼就是了：

在上面的代碼示例中，#35行的方法，是DataTable轉(zhuǎn)換為json序列化，由于本例中并無(wú)使用到，即在此略過(guò)。

接下來(lái)，打開(kāi)控制器創(chuàng)建兩Action，第一個(gè)控制是視圖操作，我們有把數(shù)據(jù)傳入視圖中。而第二個(gè)操作，是為處理上傳文件方法所服務(wù)。

控制器兩個(gè)Action代碼：

下是完成View視圖，在視圖中我們先定義表格樣式：

準(zhǔn)備即時(shí)預(yù)覽圖片的js代碼：

顯示數(shù)據(jù)與動(dòng)態(tài)產(chǎn)生Table：

上面代碼示例中，#119與#120代碼，是顯示圖片，有關(guān)base64圖片，可以參考獨(dú)立演示：

演示ASP.NET MVC應(yīng)用程序，顯示Base64圖片。

在控制器中，Insus.NET有創(chuàng)建兩個(gè)Action，一個(gè)是為視圖準(zhǔn)備，另一個(gè)是把文件轉(zhuǎn)換為FileStream，然后再用 Convert.ToBase64String() 來(lái)轉(zhuǎn)換。

在下面的視圖中，添加一個(gè)div markup來(lái)load圖片。語(yǔ)法：'<img src="data:image/png;base64,' + data.Base64Imgage + '" />'：

實(shí)時(shí)演示：

當(dāng)然，完全正確應(yīng)該是如下：

#122是動(dòng)態(tài)指定圖片原來(lái)的mine type。Razor語(yǔ)法就是簡(jiǎn)潔與方便。

asp.net mvc圖片上傳與顯示，整個(gè)實(shí)現(xiàn)過(guò)程，并沒(méi)有怎樣的復(fù)雜，一個(gè)一個(gè)小功能來(lái)實(shí)現(xiàn)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。

最新評(píng)論