ASP.NET MVC實現圖片上傳、圖片預覽顯示_實用技巧

先看看效果(下面gif動畫製作有點大，5.71MB)：

題外話：上面選擇圖片來源於Insus.NET的新浪微博，言歸正傳，由於以前的asp.net mvc的練習檔案上傳檔案，顯示或是下載等博文，均是儲存於網站目錄之中。這次練習是把圖片儲存於資料庫，也就是以圖片的資料流儲存，在上傳時我們需要把檔案處理為資料庫，顯示時，我們需要把資料流處理為檔案。

一看上面的示範，我們還會看到一個預覽區。選擇圖片時，預覽區會預先顯示選擇圖片。確認正確之後，我們再上傳至資料庫中。

使用下面SQL語句建立表[dbo].[ImageStore]，預存程序2個[dbo].[usp_ImageStore_Insert]和[dbo].[usp_ImageStore_GetAll]:

根據資料表，我們需要在asp.net mvc的models目錄中建立一個mode，習慣性是以資料表來建立:

由於我們還要處理常式與資料庫之間的交流，建立一個Entity，兩個方法，一是擷取所有資料，另一個是為添加資料所準備:

上面的Entity中，有兩個標記。
標記2，Insus.NET有寫成一個Utility，也就是說把DataTable轉換為List<T>的工具，其實有以前的asp.net mvc也有提及或是代碼分享，在此你不必再費時費心去搜尋，參考下面代碼就是了：

在上面的程式碼範例中，#35行的方法，是DataTable轉換為json序列化，由於本例中並無使用到，即在此略過。

接下來，開啟控制器建立兩Action，第一個控制是視圖操作，我們有把資料傳入視圖中。而第二個操作，是為處理上傳檔案方法所服務。

控制器兩個Action代碼：

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

準備即時預覽圖片的js代碼：

顯示資料與動態產生Table：

上面程式碼範例中，#119與#120代碼，是顯示圖片，有關base64圖片，可以參考獨立示範：

示範ASP.NET MVC應用程式，顯示Base64圖片。

在控制器中，Insus.NET有建立兩個Action，一個是為視圖準備，另一個是把檔案轉換為FileStream，然後再用 Convert.ToBase64String() 來轉換。

在下面的視圖中，添加一個div markup來load圖片。文法：'<img src="data:image/png;base64,' + data.Base64Imgage + '" />'：

即時示範：

當然，完全正確應該是如下：

#122是動態指定圖片原來的mine type。Razor文法就是簡潔與方便。

asp.net mvc圖片上傳與顯示，整個實現過程，並沒有怎樣的複雜，一個一個小功能來實現。

以上就是本文的全部內容，希望對大家的學習有所協助。