Asp.net Mvc中使用uploadify实现图片缩放保存
简介
这篇文章主要介绍下如何在asp.net mvc项目中使用uploadify，并实现简单的图片比例缩放保存。文章中参考整理了一些网上的资源，如果有问题，欢迎指出。
uploadify介绍
uploadify新版对参数进行了一些改动
本文使用的是v3.2版本，如果有使用以前版本的，请参照在asp.net mvc中使用Uploadify上传文件，不了解uploadify请参照JQuery上传插件Uploadify使用详解
uploadify部分API介绍：
Options
swf :uploadify.swf 文件的相对路径
uploader :后台处理程序的相对路径
queueID :文件队列的ID，该ID与存放文件队列的div的ID一致。
auto :true直接上传，false需要调用相关方法(见下upload)才能上传
multi :true允许多文件上传，false单文件上传
formData :通过form传递额外的参数
Events
onUploadSuccess :每上传成功一次回调函数
Methods
settings :返回或更新一个uploadify实例的设置属性
upload :上传文件队列中特定的文件或者全部
Note: cancelImg这个上传动画中的取消按钮图片参数没有了，我是直接在uploadify.css里面改的
以上参数是本文代码需要用到的，其它参数介绍可参照官方文档
在Mvc4中使用uploadify
在标题头中引入js和css文件
<script type="text/javascript" src="~/Scripts/jquery-2.0.0.min.js"></script> <script type="text/javascript" src="~/Scripts/uploadify/jquery.uploadify.js"></script> <link href="~/Scripts/uploadify/uploadify.css" rel="stylesheet" type="text/css" />
在View里添加控件标签
<div> @Html.Label("H:") @Html.TextBox("h", "", new { @class = "intonly" }) //输入要保存为的图片高度 @Html.Label("*required an integer", new { id = "hval", style = "display:none;color:red;" }) </div> <div> @Html.Label("W:") @Html.TextBox("w", "", new { @class = "intonly" }) //输入要保存为的图片宽度 @Html.Label("*required an integer", new { id = "wval", style = "display:none;color:red;" }) </div> <input type="file" name="uploadify" id="uploadify" /> <div id="fileQueue"></div> //上传的文件队列显示标签 <a href="javascript:void(0)" id="uploadstart">Upload Files</a> //使用a标签控制何时上传 @Html.TextBox("Filepath") //保存保存的图片路径集合 <br /> <img id="fileimg" src="" alt="无图片" /> //用于显示其中的一个图片查看效果
给File控件加上js
$("#uploadify").uploadify({
'swf': '@Url.Content("~/Scripts/uploadify/uploadify.swf")', //此处内部已经实现阻止缓存
'uploader': '@Url.Action("Uploadify")', //post到内部uploadify方法. Note:此处不能以查询字符串的形式传递参数
'queueID': 'fileQueue', //绑定文件队列ID
'auto': false, //禁止自动上传
'multi': true, //允许多文件上传
'onUploadSuccess': function (file, data, response) {
var s = data;
var filepath = $("#Filepath").val();
var filepaths = filepath + ";" + data; //每次文件上传成功后以分号拼接图片路径
if (filepath.trim() == "") { //如果只有一个图片不用分号
filepaths = data;
}
$("#Filepath").val(filepaths);
$("#fileimg").attr("src", filepaths.split(";")[0]); //显示第一个上传的图片
}
});
说明：上面uploader参数请求的是MVC的一个方法，这里是当前controller的uploadify方法(我的路由是默认的"{controller}/{action}/{id}")；
加上验证与限制，传递额外的参数
$(function () { $(".intonly").keyup(function () { this.value = this.value.replace(/[^0-9\.]/g, ''); //使高宽输入框只能输入小数与整数 }); $("#uploadstart").click(function () { //控制上传的a标签的点击事件 if ($("#fileQueue").html().trim() == "") { //验证没有文件上传的情况 alert("请先选择上传文件"); return; } var h = $("#h").val(); var w = $("#w").val(); if (h.trim() == "") { //对高度框无值的情况进行提示 $("#hval").css("display", "inline"); return; } else { $("#hval").css("display", "none"); } if (w.trim() == "") { //对宽度框无值的情况进行提示 $("#wval").css("display", "inline"); return; } else { $("#wval").css("display", "none"); } $(".intonly").attr({ "disabled" : "true" }); //验证通过后使高宽无法输入并置灰 $(".intonly").css("background-color", "#EFEEEF"); $("#uploadify").uploadify('settings', 'formData', { 'h' : $("#h").val(), 'w' : $("#w").val() }); //通过设置settings的formData值传递额外的参数到Action $("#uploadify").uploadify('upload', '*'); //上传文件队列中的所有文件 // Note:此处我想和上面使用一个uploadify,但郁闷的是没找见,也没试出来如何同时使用upload和settings作参数 }); });
C#按照比例缩放图片算法
此法是参照外国一个网站上的（原文链接），只能按比例缩放图片，难免有些不尽人意，大家如果还有什么比较好的方法，还请指教。
private static Image resizeImage(Image imgToResize, Size size) { int sourceWidth = imgToResize.Width; int sourceHeight = imgToResize.Height; float nPercent = 0; float nPercentW = 0; float nPercentH = 0; nPercentW = ((float)size.Width / (float)sourceWidth); nPercentH = ((float)size.Height / (float)sourceHeight); if (nPercentH < nPercentW) nPercent = nPercentH; else nPercent = nPercentW; int destWidth = (int)(sourceWidth * nPercent); int destHeight = (int)(sourceHeight * nPercent); Bitmap b = new Bitmap(destWidth, destHeight); Graphics g = Graphics.FromImage((Image)b); g.InterpolationMode = InterpolationMode.HighQualityBicubic; g.DrawImage(imgToResize, 0, 0, destWidth, destHeight); g.Dispose(); return (Image)b; }
在控制器方法里对图片进行处理
[HttpPost]
public ActionResult Uploadify(int h=300, int w=300) //Note:此处要想通过方法参数获取form值必须有默认值,否则会报错 { string filePath = ""; foreach (string item in Request.Files) { HttpPostedFileBase postFile = Request.Files[item]; if (postFile.ContentLength == 0) continue; string newFilePath = Request.ApplicationPath + "UploadFile/" + string.Format("{0:yyyyMMdd}", DateTime.Today); if (!System.IO.Directory.Exists(Server.MapPath(newFilePath))) //在UploadFile下创建当天的文件夹 { System.IO.Directory.CreateDirectory(Server.MapPath(newFilePath)); } string file = newFilePath + "/" + string.Format("{0:hhmmss}", DateTime.Now) +"_"+ System.Guid.NewGuid() + "." + postFile.FileName.Split('.').Last(); filePath = file; Image imageFile = resizeImage(Image.FromStream(postFile.InputStream, true, true), new Size { Height = h, Width = w }); imageFile.Save(Server.MapPath(file)); } return Content(filePath); //将文件路径Response }
完成后效果图如下
结束语
至此，本次的uploadify使用就结束了。我是物理系毕业的，毕业快一年了，入道也快一年了，基础什么的都比较差，正在努力向大牛们学习。自从接触了博客园，看到了Fish Li这样的大牛，就一直有了写博客的想法，而这也是第一次写，如果有什么问题，欢迎指正！最后，我还想感谢下经常写博客的TimYang，从他的博客里感受到了强大的正能量。谢谢博客园这个平台。
附:源码下载
