前面已经说了怎么通过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);
}
最后显示的效果如下：
这一节貌似讲的有点乱，因为步骤有点多，而且需要实现和注意的地方不少，下面附上源码，有助于大家研究，有问题可以留言一起讨论：
时间： 2024-08-02 02:40:17