前兩篇《MVC應用程式實作上傳檔案》和《MVC應用程式實作上傳檔案(續)》,我們練習了上傳檔案,當然上傳圖檔也是一樣。
此篇我們練習,怎樣在MVC應用程式中顯示使用者上傳的圖檔。為了接近更真實的練習,Insus.NET決定對以前的程式修改一下,就是上傳的目錄把原來的Temp目錄改為UploadFiles目錄。也就是說,Temp目錄保留,在應用程式中,添加多一個UploadFiles目錄。
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsISPrdEZwZ1Rh5WNXp1bwNjW1ZUba9VZwlHdsATOfd3bkFGazxCMx8VesATMfhHLlN3XnxCMwEzX0xiRGZkRGZ0Xy9GbvNGLpZTY1EmMZVDUSFTU4VFRR9Fd4VGdsYTMfVmepNHLrJXYtJXZ0F2dvwVZnFWbp1zczV2YvJHctM3cv1Ce-cmbw5yN5EDMmdTY2cDZ5ETY5gTYykTO0UWM4QmYwEzMkNWZh9CXxAzLchDMxIDMy8CXn9Gbi9CXzV2Zh1WavwVbvNmLvR3YxUjL3M3Lc9CX6MHc0RHaiojIsJye.png)
再對原來的model修改一下,添加兩個屬性:
改好了,現在可以開如新篇,先在資料庫中,建立兩個存儲過程[dbo].[usp_FileLibrary_GetAll]:
和[dbo].[usp_FileLibrary_GetByPrimaryKey]:
兩個存儲過程都有說明其的作用與功能。
寫好存儲過程,現在需要在MVC應用程式中,找到FileLibraryEntity.cs來,添加此兩個存儲過程的使用:
在MVC中顯示圖檔,第一次呈現給使用者看到的,不是原圖尺寸,應該是縮略圖,使用者點選圖檔檢視之後,再看到的,才是原圖大小。是以,Insus.NET寫一個Utility,是在使用者浏覽時,圖檔産生一個縮略圖至Temp目錄中。也就是文章開頭,需要改目錄的原因。因為Temp目錄将來會存儲很多臨時檔案,系統也會定時删除或是清空它。
下面是縮略圖産生的函數:
在應用程式中,找到HomeController.cs并打開,按下面的幾個步驟,添加Action或是xxxResult方法:
建立一個新視圖:
現在我們可以寫jQuery,去擷取資料庫資料與顯示上傳檔案夾中相應的圖檔:
算完成了,顯示原圖,此篇暫時略過,下面是動畫示範實時效果: