简介
这篇文章主要介绍下如何在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，从他的博客里感受到了强大的正能量。谢谢博客园这个平台。
