首先介绍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);

         }
 

ASP.NET MVC下使用SWFUpload完成剪切头像功能的更多相关文章

  1. ASP.NET MVC下的四种验证编程方式[续篇]

    在<ASP.NET MVC下的四种验证编程方式>一文中我们介绍了ASP.NET MVC支持的四种服务端验证的编程方式("手工验证"."标注Validation ...

  2. ASP.NET MVC下的四种验证编程方式

    ASP.NET MVC采用Model绑定为目标Action生成了相应的参数列表,但是在真正执行目标Action方法之前,还需要对绑定的参数实施验证以确保其有效性,我们将针对参数的验证成为Model绑定 ...

  3. Response.End()在Webform和ASP.NET MVC下的表现差异

    前几天在博问中看到一个问题--Response.End()后,是否停止执行?MVC与WebForm不一致.看到LZ的描述后,虽然奇怪于为何用Response.End()而不用return方式去控制流程 ...

  4. ASP.NET MVC下的四种验证编程方式[续篇]【转】

    在<ASP.NET MVC下的四种验证编程方式> 一文中我们介绍了ASP.NET MVC支持的四种服务端验证的编程方式(“手工验证”.“标注ValidationAttribute特性”.“ ...

  5. ASP.NET MVC下的四种验证编程方式【转】

    ASP.NET MVC采用Model绑定为目标Action生成了相应的参数列表,但是在真正执行目标Action方法之前,还需要对绑定的参数实施验证以确保其有效 性,我们将针对参数的验证成为Model绑 ...

  6. ASP.NET MVC下使用AngularJs语言(六)：获取下拉列表的value和Text

    前面Insus.NET有在Angularjs实现DropDownList的下拉列表的功能.但是没有实现怎样获取下拉列表的value和text功能. 下面分别使用ng-click和ng-change来实 ...

  7. ASP.NET MVC下使用AngularJs语言(五)：ng-selected

    这次学习ng-selected语法,这个是为DropDownList下拉列表显示默认选项. 演示从下面步骤开始 1,新建一个model: 上面#14行代码的property,数据类型为bool.即是存 ...

  8. ASP.NET MVC下使用AngularJs语言(二)：ng-click事件

    程序用户交互,用户使用mouse点击,这是一个普通的功能. 在angularjs的铵钮点击命令是ng-click. 创建Angularjs的app使用前一篇<ASP.NET MVC下使用Angu ...

  9. ASP.NET MVC下使用AngularJs语言(一)：Hello your name

    新春节后,分享第一个教程. 是教一位新朋友全新学习ASP.NET MVC下使用AngularJs语言. 一,新建一个空的Web项目.使用NuGet下载AngularJs和jQuery.二,配置Bund ...

随机推荐

  1. Class 类

    在javascript 中应用类的概念 // javascript web applications 富应用开发 // 类库:生成类的地方:给所有的构造函数提供基础方法,如 extend, inclu ...

  2. 利用任务计划自动删除指定日期的SQLServer备份文件

    利用任务计划自动删除指定日期的SQLServer备份文件 命令FORFILES [/P pathname] [/M searchmask] [/S]         [/C command] [/D ...

  3. 【Python图像特征的音乐序列生成】关于小样本的一些思考

    我之前就注意到,深度学习和音乐结合,尤其是从乐理出发进行结合(而不是纯粹的进行音乐生成),是一个尚未被深度挖掘的全新领域.可想而知,这个方向符合我要求的数据肯定是要自己搜集了. 自己搜集的数据,在量上 ...

  4. 2017-3-7-lint82single-number

    2017-3-7-lint82single-number 在河之洲 算法 小书匠 problem 82single-number/ solution int singleNumber(vector&l ...

  5. [uestc oj]H - 邱老师选妹子

    H - 邱老师选妹子 Time Limit: 3000/1000MS (Java/Others)     Memory Limit: 65535/65535KB (Java/Others) Submi ...

  6. JavaScript内存泄露，闭包内存泄露如何解决

    本文原链接:https://cloud.tencent.com/developer/article/1340979 JavaScript 内存泄露的4种方式及如何避免 简介 什么是内存泄露? Java ...

  7. android上部署tensorflow

    https://www.jianshu.com/p/ddeb0400452f 按照这个博客就可以 https://github.com/CrystalChen1017/TSFOnAndroid 这个博 ...

  8. Oracle数据库常用的Sql语句整理

    Oracle数据库常用的Sql语句整理 查看当前用户的缺省表空间 : select username,default_tablespace from user_users; 2.查看用户下所有的表 : ...

  9. 禅与 Objective-C 编程艺术（Zen and the Art of the Objective-C Craftsmanship）

    英文版Zen and the Art of the Objective-C Craftsmanshiphttps://github.com/objc-zen/objc-zen-book 中文版禅与 O ...

  10. fiddler 模拟发送post请求

    打开fiddler,选择在右边的Composer工具栏,打开Parsed选项,然后数据发送协议,例如选择POST, POST右边输入框可以输入访问地址, 下方的输入框可以输入发送的输入操作,例如发送的 ...