天天看點

MVC應用程式顯示上傳的圖檔

前兩篇《MVC應用程式實作上傳檔案》和《MVC應用程式實作上傳檔案(續)》,我們練習了上傳檔案,當然上傳圖檔也是一樣。

此篇我們練習,怎樣在MVC應用程式中顯示使用者上傳的圖檔。為了接近更真實的練習,Insus.NET決定對以前的程式修改一下,就是上傳的目錄把原來的Temp目錄改為UploadFiles目錄。也就是說,Temp目錄保留,在應用程式中,添加多一個UploadFiles目錄。

​​

MVC應用程式顯示上傳的圖檔

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

MVC應用程式顯示上傳的圖檔

改好了,現在可以開如新篇,先在資料庫中,建立兩個存儲過程[dbo].[usp_FileLibrary_GetAll]:

MVC應用程式顯示上傳的圖檔

和[dbo].[usp_FileLibrary_GetByPrimaryKey]:

MVC應用程式顯示上傳的圖檔

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

寫好存儲過程,現在需要在MVC應用程式中,找到FileLibraryEntity.cs來,添加此兩個存儲過程的使用:

MVC應用程式顯示上傳的圖檔

在MVC中顯示圖檔,第一次呈現給使用者看到的,不是原圖尺寸,應該是縮略圖,使用者點選圖檔檢視之後,再看到的,才是原圖大小。是以,Insus.NET寫一個Utility,是在使用者浏覽時,圖檔産生一個縮略圖至Temp目錄中。也就是文章開頭,需要改目錄的原因。因為Temp目錄将來會存儲很多臨時檔案,系統也會定時删除或是清空它。

下面是縮略圖産生的函數:

MVC應用程式顯示上傳的圖檔

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

MVC應用程式顯示上傳的圖檔

建立一個新視圖:

MVC應用程式顯示上傳的圖檔

現在我們可以寫jQuery,去擷取資料庫資料與顯示上傳檔案夾中相應的圖檔:

MVC應用程式顯示上傳的圖檔

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

MVC應用程式顯示上傳的圖檔

繼續閱讀