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,去獲取數據庫數據與顯示上傳文件夾中相應的圖片:

 

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

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM