ASP.NET MVC下使用SWFUpload完成剪切头像功能

首先介绍SWFUpload组件

SWFUpload是一个客户端文件上传工具，最初由Vinterwebb.se开发，它通过整合Flash与JavaScript技术

为WEB开发者提供了一个具有丰富功能继而超越传统<input type="file" />标签的文件上传模式。

 

好了，不说废话直接看代码

Js代码

  var swfu;
         window.onload = function () {
             swfu = new SWFUpload({
                 // Backend Settings
                 upload_url: "/Image/upload", //提交上传的url
                 post_params: {
                     "ASPSESSID": "@Session.SessionID" //SessionID很重要，如果没有SessionID将无法上传，并且加载页面时Button都不会显示
                 },
                 // 上传文件设置
                 file_size_limit: "2 MB", //大小
                 file_types: "*.jpg",//格式
                 file_types_description: "JPG Images",
                 file_upload_limit: 0,    // Zero means unlimited
                 //一系列事件 默认事件在Handler.js文件内
                 swfupload_preload_handler: preLoad,
                 swfupload_load_failed_handler: loadFailed,
                 file_queue_error_handler: fileQueueError,
                 file_dialog_complete_handler: fileDialogComplete,
                 upload_progress_handler: uploadProgress,//上传过程
                 upload_error_handler: uploadError,//上传异常
                 upload_success_handler: cutImage, //上传成功
                 upload_complete_handler: uploadComplete,
                 // Button样式相关设置
                 button_image_url: '@Url.Content("~/Content/js/swfuploadv250/images/XPButtonNoText_160x22.png")',
                 button_placeholder_id: "spanButtonPlaceholder",//Button按钮ID
                 button_width: 160,
                 button_height: 22,
                 button_text: '<span class="button">上传图片 <span class="buttonSmall">(2 MB Max)</span></span>',
                 button_text_style: '.button { font-family: Helvetica, Arial, sans-serif;color:red; font-size: 14pt; } .buttonSmall { font-size: 10pt; }',
                 button_text_top_padding: 1,
                 button_text_left_padding: 5,
                 // Flash文件(swfupload.swf) 路径设置
                 flash_url: '@Url.Content("~/Content/js/swfuploadv250/swfupload.swf")',
                 flash9_url: '@Url.Content("~/Content/js/swfuploadv250/swfupload_fp9.swf")',
                 custom_settings: {
                     upload_target: "divFileProgressContainer"  //展示信息框 的id
                 },
                 // 是否开启调试
                 debug: false
             });

Html

 <body>
     <div id="content">
         aaabbb
         <div id="swfu_container" style="margin: 0px 10px;">
             <div>
                 <span id="spanButtonPlaceholder"></span>
             </div>
             <div id="divFileProgressContainer" style="height: 75px;"></div>
             <div id="thumbnails"></div>
         </div>
     </div>
     <div id="divImg" style="position:relative;overflow:hidden">
         <div id="divCut" class="easyui-draggable" style="border:1px solid red;width:226px;height:198px;" data-options="onDrag:onDrag"></div>
     </div>
     <input type="button" value="头像截取" id="btnCut" />
     <img id="cutImg" />
 </body>

这时候页面效果

点击上传图片效果

控制器方法

 public ActionResult Upload()
         {
             //获得上传数据
             HttpPostedFileBase jpeg_image_upload = Request.Files["Filedata"];
             //保存图片
             string path = "../Images/temp.jpg";
             jpeg_image_upload.SaveAs(Request.MapPath(path));
             //获取图片大小
             UploadImage.Models.ImageViewData imgViewModel = new Models.ImageViewData();
             //取得上传图片流
             using (System.Drawing.Image original_image = System.Drawing.Image.FromStream(jpeg_image_upload.InputStream))
             {
                 imgViewModel.Path = path;
                 imgViewModel.Width = original_image.Width;
                 imgViewModel.Height = original_image.Height;
             }
             return Json(imgViewModel, JsonRequestBehavior.AllowGet);
         }

Upload_success_handler:事件方法

主要步骤

1.根据服务端图片数据 设置用来显示图片div的背景src 和 大 小

2.保存src地址

 //上传成功事件方法   上传相关信息  服务端返回的数据
 function cutImage(file, serverData) {
     var oJson = JSON.parse(serverData);
     $("#divImg").css("backgroundImage", "url(" + oJson.Path + ")").css("width", oJson.Width + "px").css("height", oJson.Height + "px");
     imgUrl = oJson.Path;
 }
 var imgUrl = "";

这是回调函数里的file参数信息，能用到的比较少。

creationdate: Wed Apr 09 2014 15:17:50 GMT+0800 (中国标准时间)
filestatus: -4
id: "SWFUpload_0_0"
index: 0
modificationdate: Thu Feb 27 2014 11:37:30 GMT+0800 (中国标准时间)
name: "1e6b388f8a513a5d6464f0b722e663aa.jpg"
post: Object
size: 101205
type: ".jpg"
uploadtype: 0
__proto__: Object

拖动用到了easyui的draggable组件 

如图

 

再次发送ajax请求给服务端（这次不需要用到swfupload组件）

只需要把选取框相对背景图的 x 和y轴 以及选取框的宽高即可

  //截图图片
             $("#btnCut").click(function () {
                 var $cut = $("#divCut");
                 var $divImg = $("#divImg");
                 var x = $cut.offset().left-$divImg.offset().left; //横坐标
                 var y = $cut.offset().top-$divImg.offset().left;//纵坐标
                 var width = $cut.width();//宽度
                 var height = $cut.height();//高度
                 //发送数据到服务端
                 $.post("/Image/ImageCut", { "x": parseInt(x), "y": parseInt(y), "width": parseInt(width), "height": parseInt(height), "imgUrl": imgUrl },
                     function (data) {

                         $("#divImg").hide();
                         $("#cutImg").attr("src", data);
                     })
             })

服务端代码

 public ActionResult ImageCut(FormCollection form)
         {
             //1:接受参数
             int x = int.Parse(form["x"]);
             int y = int.Parse(form["y"]);
             int width = int.Parse(form["width"]);
             int height = int.Parse(form["height"]);
             string imgUrl = form["imgUrl"];
             string imgPath = string.Empty;
             using (Bitmap map = new Bitmap(width, height))//创建图片的大小与要截取图像的大小一致
             {
                 using (Graphics g = Graphics.FromImage(map))
                 {
                     //将之前上传的图片转成Image
                     using (Image img = Image.FromFile(Request.MapPath(imgUrl)))
                     {
                                                 // 操作的图，    要画大小，   画哪一块， 度量单位
                         g.DrawImage(img, new Rectangle(, , width, height), new Rectangle(x, y, width, height), GraphicsUnit.Pixel);
                         imgPath = "../Images/cuttemp.jpg";
                         map.Save(Request.MapPath(imgPath));//将BitMap保存
                     }
                 }
             }
             return Content(imgPath);
         }