前兩篇《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目錄。
改好了,現在可以開如新篇,先在數據庫中,創建兩個存儲過程[dbo].[usp_FileLibrary_GetAll]:
和[dbo].[usp_FileLibrary_GetByPrimaryKey]:
兩個存儲過程都有說明其的作用與功能。
寫好存儲過程,現在需要在MVC應用程序中,找到FileLibraryEntity.cs來,添加此兩個存儲過程的使用:
在MVC中顯示圖片,第一次呈現給用戶看到的,不是原圖尺寸,應該是縮略圖,用戶點擊圖片查看之后,再看到的,才是原圖大小。因此,Insus.NET寫一個Utility,是在用戶瀏覽時,圖片產生一個縮略圖至Temp目錄中。也就是文章開頭,需要改目錄的原因。因為Temp目錄將來會存儲很多臨時文件,系統也會定時刪除或是清空它。
下面是縮略圖產生的函數:
在應用程序中,找到HomeController.cs並打開,按下面的幾個步驟,添加Action或是xxxResult方法:
創建一個新視圖:
現在我們可以寫jQuery,去獲取數據庫數據與顯示上傳文件夾中相應的圖片:
算完成了,顯示原圖,此篇暫時略過,下面是動畫演示實時效果: