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的工具,他的介绍就 ...
随机推荐
- google analysis教程
sklearn实战-乳腺癌细胞数据挖掘 https://study.163.com/course/introduction.htm?courseId=1005269003&utm_campai ...
- ASP.NET IOC之 AutoFac的认识和结合MVC的使用
这几天研究了解发现AutoFac是个牛X的IOC容器,是.NET领域比较流行的IOC框架之一,传说是速度最快的,~ 据相关资料,相关学习,和认知,遂做了一些整理 优点: 它是C#语言联系很紧密,也就是 ...
- LibreOJ#6030. 「雅礼集训 2017 Day1」矩阵
https://loj.ac/problem/6030 如果矩阵第i列有一个黑色, 那可以用他把第i行全都染黑,也可以使任意一列具有黑色 然后就可以用第i行把矩阵染黑 染黑一列的代价最少是1 染黑一行 ...
- 翻译:GLSL的顶点位移贴图
翻译:GLSL的顶点位移贴图 翻译自: Vertex Displacement Mapping using GLSL 译者: FreeBlues 说明: 之所以选择这篇文档, 是因为现在但凡提到位移贴 ...
- 新建springboot项目启动出错 Failed to configure a DataSource: 'url' attribute is not specified and no embedded datasource could be configured.
错误信息入下: 2018-06-23 01:48:05.275 INFO 7104 --- [ main] o.apache.catalina.core.StandardService : Stopp ...
- How to Tell Science Stories with Maps
Reported Features How to Tell Science Stories with Maps August 25, 2015 Greg Miller This map, part ...
- 为什么JavaScript声明变量的时候鼓励加var关键字
在JavaScript中,var用来声明变量,但是这个语法并不严格要求,很多时修改,我们可以直接使用一个变量而不用var声明它. var x = "XX"; y ="xx ...
- 深入浅出JavaScript之跨域总结
什么是跨域 1.document.domain+iframe的设置 2.动态创建script 3.利用iframe和location.hash 4.window.name实现的跨域数据传输 5.使用H ...
- sklearn_k均值聚类
# 机器学习之k均值聚类 # coding:utf-8 import sklearn.datasets as datasets from sklearn.cluster import KMeans i ...
- 调整扩大VMDK格式VirtualBox磁盘空间
如果虚拟机的格式是VDI格式的, 那么可以通过这篇文章来调整磁盘大小: 调整Virtual Box硬盘大小 不过楼主当初在创建虚拟机的时候,是用的VMDK格式, 以求与VMWare的兼容性.这时候要扩 ...