MVC图片上传并显示缩略图
前面已经说了怎么通过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, , , 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 > )
{
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), , ); string htmltag = htmltag = "<img id=\"img1\" src=\"/Temp/" + img.ImgName + "\"/>";
return Content(htmltag);
}
最后显示的效果如下：
这一节貌似讲的有点乱，因为步骤有点多，而且需要实现和注意的地方不少，下面附上源码，有助于大家研究，有问题可以留言一起讨论：
MVC图片上传并显示缩略图的更多相关文章
- yii php 图片上传与生成缩略图
今天需要做图片上传与生成缩略图的功能,把代码进行记录如下: html 视图 ($pic_action_url = $this->createAbsoluteUrl('h ...
- 图片上传即时显示javascript代码
这是基于javascript的一种图片上传即时显示方法,测试结果IE6和火狐浏览器可以正常使用.google浏览器不兼容. 这种方法兼容性比较差,仅供参考,建议使用ajax方法来即时显示图片. 1.首 ...
- MVC图片上传详解 IIS (安装SSL证书后) 实现 HTTP 自动跳转到 HTTPS C#中Enum用法小结 表达式目录树 “村长”教你测试用例 引用provinces.js的三级联动
MVC图片上传详解 MVC图片上传--控制器方法 新建一个控制器命名为File,定义一个Img方法 [HttpPost]public ActionResult Img(HttpPostedFile ...
- spring mvc 图片上传,图片压缩、跨域解决、 按天生成文件夹 ,删除，限制为图片代码等相关配置
spring mvc 图片上传,跨域解决 按天生成文件夹 ,删除,限制为图片代码,等相关配置 fs.root=data/ #fs.root=/home/dev/fs/ #fs.root=D:/fs/ ...
- ruby on rails爬坑（三）：图片上传及显示
一,问题及思路 最近在用rails + react + mysql基本框架写一个cms + client的项目,里面涉及到了图片的上传及显示,下面简单说说思路,至于这个项目的配置部署,应该会在寒假结束 ...
- 图片上传并显示（兼容ie），图片大小判断
图片上传并显示(兼容ie),图片大小判断 HTML <div id="swf" style="margin: 0 auto;text-align: center;& ...
- MVC图片上传详解
MVC图片上传--控制器方法 新建一个控制器命名为File,定义一个Img方法 [HttpPost]public ActionResult Img(HttpPostedFileBase shangch ...
- MVC 图片上传 带进度条（转）
MVC 图片上传小试笔记 form.js 这个插件已经是很有名的,结合MVC的html辅助方法异步上传就很简单了.jQuery Form Plugin :http://www.malsup.com/j ...
- Newtonsoft.Json C# Json序列化和反序列化工具的使用、类型方法大全 C# 算法题系列(二) 各位相加、整数反转、回文数、罗马数字转整数 C# 算法题系列(一) 两数之和、无重复字符的最长子串 DateTime Tips c#发送邮件，可发送多个附件 MVC图片上传详解
Newtonsoft.Json C# Json序列化和反序列化工具的使用.类型方法大全 Newtonsoft.Json Newtonsoft.Json 是.Net平台操作Json的工具,他的介绍就 ...
随机推荐
- IDEA Mybatis plugin插件破解
破解文件: 链接:https://pan.baidu.com/s/1J7asfLc5I0RBcoYX3_yNvQ 提取码:kjxv 使用方法: C:\Users\{你的用户名}\.IntelliJId ...
- nova-api中ExtensionManager的构造
源码版本:H版 nova/api/openstack/__init__.py APIRouter类: def __init__(self, ext_mgr=None, init_only=None): ...
- windows下静态编译pthread
1. Building the library as a statically linkable library-------------------------------------------- ...
- mongo查询日期格式数据
/ali/mongodb/bin/mongo -u user -p '123456' 127.0.0.1:27017/KYElog ISODate方式 db.col_02.find({"Lo ...
- Android 利用广播接收器启动服务
public class MainActivity extends Activity { private Button bt ; protected void onCreate(Bundle save ...
- CSS3实战之box-sizing
一般我们都认为border和padding都包含在width或height之内. 而现代标准的浏览器一般都认为width和height仅仅包含content,刨去了border和padding区域. ...
- Nginx服务优化详解
Nginx服务优化详解 1.隐藏Nginx版本信息 编辑主配置文件nginx.conf,在http标签中添加代码 server_tokens off;来隐藏软件版本号. 2.更改Nginx服务启动的默 ...
- mysql修改表操作
一: 修改表信息 1.修改表名 alter table test_a rename to sys_app; 2.修改表注释 alter table sys_application comment '系 ...
- Python练习-不知道弄个什么鬼
Alex大神,今天丢过来一个PDF,结果就成了这个样子! 1. 执行 Python 脚本的两种方式 交互方式: 命令行 文件方式: ...
- Ubuntu 14.04 + xRDP + Xfce 实现Windows远程桌面连接
1. 安装xRDP及vncserver sudo apt-get install xrdp sudo apt-get install vnc4server tightvncserver 2. 安装Xf ...