ASP.NET MVC圖片管理(上傳，預覽與顯示)

先看看效果(下面gif動畫制作有點大，5.71MB)：

 

題外話：上面選擇圖片來源於Insus.NET的新浪微博：http://weibo.com/104325017 也是昨晚(2015-07-03)Insus.NET烹飪的晚餐。如果你也想學習烹飪，也可以關注Insus.NET的微博。

言歸正傳，由於以前的asp.net mvc的練習文件上傳文件，顯示或是下載等博文，均是存儲於站點目錄之中。這次練習是把圖片存儲於數據庫。也就是以圖片的數據流存儲。在上傳時我們需要把文件處理為數據庫，顯示時，我們需要把數據流處理為文件。

一看上面的演示，我們還會看到一個預覽區。選擇圖片時，預覽區會預先顯示選擇圖片。確認正確之后，我們再上傳至數據庫中。

使用下面SQL語句創建表[dbo].[ImageStore]，存儲過程2個[dbo].[usp_ImageStore_Insert]和[dbo].[usp_ImageStore_GetAll]:

CREATE TABLE [dbo].[ImageStore](
    [ImageStore_nbr] [int] IDENTITY(1,1) NOT NULL PRIMARY KEY,
    [Name] [nvarchar](50) NOT NULL,
    [MimeType] [nvarchar](50) NOT NULL,
    [Content] [image] NOT NULL
)
GO

CREATE PROCEDURE [dbo].[usp_ImageStore_Insert]
(
    @Name [nvarchar](50),
    @MimeType [nvarchar](50),
    @Content [image]
)
AS
INSERT INTO [dbo].[ImageStore] ([Name],[MimeType],[Content]) VALUES (@Name,@MimeType,@Content)
GO

CREATE PROCEDURE [dbo].[usp_ImageStore_GetAll]
AS
SELECT [ImageStore_nbr],[Name],[MimeType],[Content] FROM [dbo].[ImageStore]
GO

 

根據數據表，我們需要在asp.net mvc的models目錄中創建一個mode，習慣性是以數據表來創建:



由於我們還要處理程序與數據庫之間的交流，創建一個Entity，兩個方法，一是獲取所有數據，另一個是為添加數據所准備:

上面的Entity中，有兩個標記，標記一可以參考這篇：http://www.cnblogs.com/insus/p/4156735.html 。
標記2，Insus.NET有寫成一個Utility，也就是說把DataTable轉換為List<T>的工具，其實有以前的asp.net mvc也有提及或是代碼分享，在此你不必再費時費心去搜索，參考下面代碼就是了：

在上面的代碼示例中，#35行的方法，是DataTable轉換為json序列化，由於本例中並無使用到，即在此略過。

code source:

 public static List<T> ToList<T>(DataTable dataTable)
        {
            var columnNames = dataTable.Columns.Cast<DataColumn>()
                .Select(c => c.ColumnName)
                .ToList();

            var properties = typeof(T).GetProperties();

            return dataTable.AsEnumerable().Select(row =>
            {
                var objT = Activator.CreateInstance<T>();

                foreach (var pro in properties)
                {
                    if (columnNames.Contains(pro.Name))
                        pro.SetValue(objT, row[pro.Name]);
                }

                return objT;
            }).ToList();
        }

接下來，打開控制器創建兩Action，第一個控制是視圖操作，我們有把數據傳入視圖中。而第二個操作，是為處理上傳文件方法所服務。

控制器兩個Action代碼：

 public ActionResult ImageManagement()
        {
            ImageStoreEntity ise = new ImageStoreEntity();
            var model = ise.GetAll();
            return View("ImageManagement", model);
        }

        [HttpPost]
        public ActionResult UploadFile(IEnumerable<HttpPostedFileBase> filename)
        {
            foreach (var file in filename)
            {
                if (file.ContentLength > 0)
                {
                    ImageStore imageStore = new ImageStore();

                    imageStore.Name = Path.GetFileName(file.FileName);
                    imageStore.MimeType = file.ContentType;
                                        
                    using (Stream inputStream = file.InputStream)
                    {
                        MemoryStream memoryStream = inputStream as MemoryStream;
                        if (memoryStream == null)
                        {
                            memoryStream = new MemoryStream();
                            inputStream.CopyTo(memoryStream);
                        }
                        imageStore.Content = memoryStream.ToArray();
                    }

                    ImageStoreEntity ise = new ImageStoreEntity();
                    ise.Insert(imageStore);
                }
            }

            return RedirectToAction("ImageManagement");
        }

下是完成View視圖，在視圖中我們先定義表格樣式：

        div, span, font, a, td {
            font-size: 13px;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border-left: 1px solid #aaa;
            border-top: 1px solid #aaa;
            background: #efefef;
        }

        th {
            border-right: 1px solid #888;
            border-bottom: 1px solid #888;
            padding: 3px 15px;
            text-align: center;
            font-weight: bold;
            background: #ccc;
            font-size: 13px;
        }

        td {
            border-right: 1px solid #888;
            border-bottom: 1px solid #888;
            padding: 3px 15px;
            text-align: center;
            color: #3C3C3C;
        }

准備即時預覽圖片的js代碼：



其實這是從另外一篇稍作修改而來，更多參考：http://www.cnblogs.com/insus/p/4301179.html 現成的，呵呵，那都是持續努力學習的結果。

顯示數據與動態產生Table：



上面代碼示例中，#119與#120代碼，是顯示圖片，有關base64圖片，可以參考獨立演示：http://www.cnblogs.com/insus/p/3621199.html
當然，完全正確應該是如下：



#122是動態指定圖片原來的mine type。Razor語法就是簡潔與方便。

asp.net mvc圖片上傳與顯示，整個實現過程，並沒有怎樣的復雜。一個一個小功能來實現。

Insus.NET這大半年以來，均是以學習asp.net mvc為主，但asp.net也有涉及，但是相對較少了。一旦覺得技術成熟，馬上使用asp.net mvc來實現專案。與大家一起努力......