MVC應用程序顯示上傳的圖片

前兩篇《MVC應用程序實現上傳文件》http://www.cnblogs.com/insus/p/3590907.html和《MVC應用程序實現上傳文件(續)》http://www.cnblogs.com/insus/p/3594834.html，咱們練習了上傳文件，固然上傳圖片也是同樣。

此篇咱們練習，怎樣在MVC應用程序中顯示用戶上傳的圖片。爲了接近更真實的練習，Insus.NET決定對之前的程序修改一下，就是上傳的目錄把原來的Temp目錄改成UploadFiles目錄。也就是說，Temp目錄保留，在應用程序中，添加多一個UploadFiles目錄。

 

再對原來的model修改一下，添加兩個屬性：

 

改好了，如今能夠開如新篇，先在數據庫中，建立兩個存儲過程[dbo].[usp_FileLibrary_GetAll]：

和[dbo].[usp_FileLibrary_GetByPrimaryKey]：

 

兩個存儲過程都有說明其的做用與功能。

寫好存儲過程，如今須要在MVC應用程序中，找到FileLibraryEntity.cs來，添加此兩個存儲過程的使用：

 

在MVC中顯示圖片，第一次呈現給用戶看到的，不是原圖尺寸，應該是縮略圖，用戶點擊圖片查看以後，再看到的，纔是原圖大小。所以，Insus.NET寫一個Utility，是在用戶瀏覽時，圖片產生一個縮略圖至Temp目錄中。也就是文章開頭，須要改目錄的緣由。由於Temp目錄未來會存儲不少臨時文件，系統也會定時刪除或是清空它。

下面是縮略圖產生的函數：

 

 在應用程序中，找到HomeController.cs並打開，按下面的幾個步驟，添加Action或是xxxResult方法:

 

建立一個新視圖：

 

如今咱們能夠寫jQuery，去獲取數據庫數據與顯示上傳文件夾中相應的圖片：

 

算完成了，顯示原圖，此篇暫時略過，下面是動畫演示實時效果：