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,从他的博客里感受到了强大的正能量。谢谢博客园这个平台。

 

 

附:源码下载

 

posted @ 2013-05-28 22:44  胖鸟低飞  阅读(3289)  评论(10编辑  收藏