MVC图片上传并显示缩略图

浏览数：40 / 时间：2015年06月09日

前面已经说了怎么通过MVC来上传文件，那么这次就说说如何上传图片然后显示缩略图，这个的实用性还是比较大。用UpLoad文件夹来保存上传的图片，而Temp文件夹来保存缩略图，前面文件上传部分就不再重复了，不过图片上传当然只能是图片格式的文件，因此在之前那篇博客中通过控制格式的上传便能防止恶意上传，这个是文件上传的教程链接：http://www.cnblogs.com/xmfdsh/p/3988868.html

对于数据库的设计的话就随便点:

于是用EF便自动生成了类如下：

public partial class Image
    {
        public int Id { get; set; }
        public string ImgName { get; set; }
        public string ImgSize { get; set; }
        public System.DateTime UpLoadTime { get; set; }
    }

下面是缩略图产生的函数：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace UpLoadImg.Utilities
{
    public class Thumbnail
    {
        public static void CreateThumbnail(string source,string destination,int maxWidth,int maxHeight)
        {
            System.Drawing.Image Img = System.Drawing.Image.FromFile(source);
            int Width = Img.Width;
            int Height = Img.Height;
            int thumbnailWidth, thumbnailHeight;

            Resize(Width, Height, maxWidth, maxHeight, out thumbnailWidth, out thumbnailHeight);

            System.Drawing.Bitmap bitmap = new System.Drawing.Bitmap(thumbnailWidth, thumbnailHeight);
            System.Drawing.Graphics graphics = System.Drawing.Graphics.FromImage(bitmap);

            graphics.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
            graphics.CompositingQuality = System.Drawing.Drawing2D.CompositingQuality.HighQuality;
            graphics.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;

            graphics.DrawImage(Img, 0, 0, thumbnailWidth, thumbnailHeight);
            bitmap.Save(destination);
        }

        private static void Resize(int Width,int Height,int maxWidth,int maxHeight,out int sizedWidth,out int sizedHeight)
        {
            if(Width<maxWidth && Height<maxHeight)
            {
                sizedWidth=Width;
                sizedHeight=Height;
                return ;
            }
            sizedWidth = maxWidth;
            sizedHeight = (int)((double)Height / Width * sizedWidth + 0.5);
            if(sizedHeight>maxHeight)
            {
                sizedHeight = maxHeight;
                sizedWidth = (int)((double)Width / Height * sizedHeight + 0.5);
            }
        }
    }
}

这种缩略图的函数网上一搜一大把，不过实现起来也不难，就像上面那样，我就不写注释，不过应该想看懂难度还是不大的。

先说上传的过程，和上次是一样的，只不过这次需要在数据库中保存一些数据，因此上传后到了服务端便要对数据进行存储处理：

[HttpPost]
        public ContentResult UpLoadFile(HttpPostedFileBase fileData)
        {
            if (fileData != null && fileData.ContentLength > 0)
            {
                string fileSave = Server.MapPath("~/UpLoad/");
                int size = fileData.ContentLength;
                //获取文件的扩展名
                string extName = Path.GetExtension(fileData.FileName);
                //得到一个新的文件名称
                string newName = Guid.NewGuid().ToString() + extName;
                //给模型赋值
                Image img = new Image();
                img.ImgName = newName;
                img.ImgSize = size.ToString() ;
                img.UpLoadTime = System.DateTime.Now;
                //保存图片的同时，保存images的数据的数据库
                MVCEntities db = new MVCEntities();
                db.Images.Add(img);
                db.SaveChanges();

                fileData.SaveAs(Path.Combine(fileSave, newName));
            }
            return Content("");
        }

保存图片的同时，保持images的数据到数据库。

Home中的视图便是用来显示保存所有已经保存的图片：html视图如下

<body>
    <div>
        <table class="table" style="border-collapse: collapse; width: 60%;">
            <thead>
                <tr>
                    <th style="border: 1px solid #0094ff;">ID</th>
                    <th style="border: 1px solid #0094ff;">Photo</th>
                    <th style="border: 1px solid #0094ff;">FileName</th>
                    <th style="border: 1px solid #0094ff;">Size</th>
                    <th style="border: 1px solid #0094ff;">UploadTime</th>
                </tr>
            </thead>
            <tbody id="tbody1"></tbody>
        </table>
        <div id="dialog" style="display: none;" title="Dialog Title">
        </div>
    </div>
</body>

然后具体的数据应该通过js动态来加载：

//html加载时候执行的方法
        $(document).ready(function () {
            $.ajax({
                type: ‘GET‘,
                url: ‘/Home/GetAllUploadImg‘,//通过向这个url请求数据
                dataType: ‘json‘,
                contentType: ‘application/json; charset=utf-8‘,
                success: function (data, textStatus) {
                    var tbody = $(‘#tbody1‘);
                    $.each(data, function (i, item) {
                        OutputData(tbody, item);//得到返回的数据后，动态加载到html中。
                    });
                }
            });
        });

通过引用jQuery UI的css和js库来实现点击缩略图显示原图：

<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    <script src="~/Scripts/jquery-ui-1.8.24.js"></script>

而函数function OutputData(tbody, item)的实现如下：

function OutputData(tbody, item) {
            var uploadTime = new Date(parseInt(item.UpLoadTime.substr(6)));
            var uploadDate = uploadTime.getFullYear() + "-" + uploadTime.getMonth() + "-" + uploadTime.getDate();
            tbody.append("<tr>" +
                        "<td style=\"border: 1px solid #0094ff;\">" +
                           item.Id +
                        "</td>" +
                        "<td style=\"border: 1px solid #0094ff;\">" +
                            "<div id=\"DivImg" + item.Id + "\"  />" +
                        "</td>" +
                        "<td style=\"border: 1px solid #0094ff;\">" +
                            item.ImgName +
                        "</td>" +
                        "<td style=\"border: 1px solid #0094ff;\">" +
                            item.ImgSize +
                        "</td>" +
                        "<td style=\"border: 1px solid #0094ff;\">" +
                            uploadDate +
                        "</td>" +
                        "</tr>");

            var imgTag = $(‘#DivImg‘ + item.Id);

            $.get("/Home/GetThumbnailImage",
             { ImgName: item.ImgName },
             function (data) {
                 imgTag.html(data);
             });


            imgTag.click(function () {
                $("#dialog").dialog({
                    autoOpen: false,
                    position: ‘center‘,
                    title: item.OldFileName,
                    draggable: false,
                    width: 700,
                    height: 600,
                    resizable: true,
                    modal: true,
                }).dialog("open");

                $.get("/Home/GetImage",
                            { ImgName: item.ImgName },
                            function (data) {
                                $(‘#dialog‘).html(data);
                            });
            });
        }

服务端通过GetImage方法获取原图：

public ContentResult GetImage(Image img)
        {
            string htmltag = htmltag = "<img id=\"img1\"  src=\"/UpLoad/" + img.ImgName + "\"/>";
            return Content(htmltag);
        }

通过GetThumbnailImage(Image img)获取缩略图：

public ContentResult GetThumbnailImage(Image img)
        {
            string ImgUrl = "~/UpLoad/" + img.ImgName;
            string TempImgUrl="~/Temp/"+img.ImgName;
            Thumbnail.CreateThumbnail(Server.MapPath(ImgUrl), Server.MapPath(TempImgUrl), 96, 96);

            string htmltag = htmltag = "<img id=\"img1\"  src=\"/Temp/" + img.ImgName + "\"/>";
            return Content(htmltag);
        }