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的工具,他的介绍就 ...
随机推荐
- U45490 还没想好名字的题Ⅱ
这一题的环状板 Solution 暴力断环为链, 枚举起点跑 \(n\) 遍 \(DP\), 取最小值即可 Code #include<iostream> #include<cstd ...
- 转：UIView之userInteractionEnabled属性介绍
属性作用 该属性值为布尔类型,如属性本身的名称所释,该属性决定UIView是否接受并响应用户的交互. 当值设置为NO后,UIView会忽略那些原本应该发生在其自身的诸如touch和keyboard等用 ...
- SPI、I2C、UART、I2S、GPIO、SDIO、CAN
总线,总线,总要陷进里面.这世界上的信号都一样,但是总线却成千上万,让人头疼. 总的来说,总线有三种:内部总线.系统总线和外部总线.内部总线是微机内部各外围芯片与处理器之间的总线,用于芯片一级的互连: ...
- git 第一次关联远程仓库
1.首先需要先git pull origin master 2.然后合并两个无关的仓库 git pull origin master --allow-unrelated-histories
- APScheduler定时执行外加supervisor管理后台运行
最近写的天气爬虫想要让它在后台每天定时执行,一开始用的celery,但不知道为什么明明设置cron在某个时间运行,但任务却不间断的运行.无奈转用apscheduler,但是不管怎么设置都不能使得当调用 ...
- 手把手教你在.NET中创建Web服务
最近发现在.NET平台下使用Web服务还是很简单的.下面举个在.NET平台下创建Web服务的简单例子.首先用Visul Studio .Net创建一个C# 项目Asp.Net Web服务程序,源代码如 ...
- oracle常见错误对应代码与含义
本篇文章是对oracle错误代码进行了详细的总结与分析,需要的朋友参考下 ORA-00001: 违反唯一约束条件 (.) ORA-00017: 请求会话以设置跟踪事件 ORA-00018: 超出最大会 ...
- 在Django中Session的那点事！
1.session是什么 首先引入度娘的解释:Session:在计算机中,尤其是在网络应用中,称为“会话控制”.Session 对象存储特定用户会话所需的属性及配置信息.这样,当用户在应用程序的 We ...
- ROS多线程订阅消息
对于一些只订阅一个话题的简单节点来说,我们使用ros::spin()进入接收循环,每当有订阅的话题发布时,进入回调函数接收和处理消息数据.但是更多的时候,一个节点往往要接收和处理不同来源的数据,并且这 ...
- 编写高效的JavaScript程序
作者: Addy Osmani 来源: CSDN 发布时间: 2013-01-10 14:15 阅读: 7952 次 推荐: 15 原文链接 [收藏] 英文原文:Writing Fas ...