ASP.NET MVC下使用SWFUpload完成剪切头像功能
首先介绍SWFUpload组件
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);
}
//上传成功事件方法 上传相关信息 服务端返回的数据
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
//截图图片
$("#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完成剪切头像功能的更多相关文章
- ASP.NET MVC下的四种验证编程方式[续篇]
在<ASP.NET MVC下的四种验证编程方式>一文中我们介绍了ASP.NET MVC支持的四种服务端验证的编程方式("手工验证"."标注Validation ...
- ASP.NET MVC下的四种验证编程方式
ASP.NET MVC采用Model绑定为目标Action生成了相应的参数列表,但是在真正执行目标Action方法之前,还需要对绑定的参数实施验证以确保其有效性,我们将针对参数的验证成为Model绑定 ...
- Response.End()在Webform和ASP.NET MVC下的表现差异
前几天在博问中看到一个问题--Response.End()后,是否停止执行?MVC与WebForm不一致.看到LZ的描述后,虽然奇怪于为何用Response.End()而不用return方式去控制流程 ...
- ASP.NET MVC下的四种验证编程方式[续篇]【转】
在<ASP.NET MVC下的四种验证编程方式> 一文中我们介绍了ASP.NET MVC支持的四种服务端验证的编程方式(“手工验证”.“标注ValidationAttribute特性”.“ ...
- ASP.NET MVC下的四种验证编程方式【转】
ASP.NET MVC采用Model绑定为目标Action生成了相应的参数列表,但是在真正执行目标Action方法之前,还需要对绑定的参数实施验证以确保其有效 性,我们将针对参数的验证成为Model绑 ...
- ASP.NET MVC下使用AngularJs语言(六)：获取下拉列表的value和Text
前面Insus.NET有在Angularjs实现DropDownList的下拉列表的功能.但是没有实现怎样获取下拉列表的value和text功能. 下面分别使用ng-click和ng-change来实 ...
- ASP.NET MVC下使用AngularJs语言(五)：ng-selected
这次学习ng-selected语法,这个是为DropDownList下拉列表显示默认选项. 演示从下面步骤开始 1,新建一个model: 上面#14行代码的property,数据类型为bool.即是存 ...
- ASP.NET MVC下使用AngularJs语言(二)：ng-click事件
程序用户交互,用户使用mouse点击,这是一个普通的功能. 在angularjs的铵钮点击命令是ng-click. 创建Angularjs的app使用前一篇<ASP.NET MVC下使用Angu ...
- ASP.NET MVC下使用AngularJs语言(一)：Hello your name
新春节后,分享第一个教程. 是教一位新朋友全新学习ASP.NET MVC下使用AngularJs语言. 一,新建一个空的Web项目.使用NuGet下载AngularJs和jQuery.二,配置Bund ...
随机推荐
- mysql 5.7.20 在线安装与卸载(yum卸载与rpm卸载方式)
mysql5.7.20和之前的5.7.16版本不同,解压后没有data文件,需要自己建立 1.把下载的mysql5.7.20放到目录:/usr/local/2.卸载cenos上预装的mysql查看已安 ...
- web APP到底和跨平台APP开发有什么区别？
什么是web app? WebApp是指基于Web的系统和应用,其作用是向广大的最终用户发布一组复杂的内容和功能. 说的浅显易懂点儿就是因为移动互联网特别火爆,很多企业公司也都想拥有一个属于自己的ap ...
- HDU 5500 Reorder the Books （水题）
题意: 有n本书,编号为1~n,现在书的顺序乱了,要求恢复成有序的样子,每次只能抽出其中一本并插到最前面,问最少需要多少抽几次? 思路: 如果pos[i]放的不是书i的话,则书i的右边所有的书都必须抽 ...
- 使用ABAP代码返回S/4HANA Material上维护的Attachment明细
在事务码 MM02里为ID为16的material维护附件: 如何使用ABAP代码获得如下附件的名称和文件内容? REPORT zgos_api. DATA ls_appl_object TY ...
- [学习笔记]Linux下mysql的基础操作
命令 #查看版本 mysql --version #进入mysql 命令 mysql -u root -p mysql -u root@localhost (没有密码的情况) #创建数据库 c ...
- FreeRTOS_事件标志组
FreeRTOS事件标志组 事件标志组简介 1. 事件位(事件标志) 事件位用于表明某个事件是否发生,事件位通常用作事件标志,比如下面的几个例子: 当收到一条消息并且把这条消息处理掉以后就可以将某个位 ...
- vue 修改端口
- 解决sublime text 2总是在新窗口中打开文件(标签中打开)
在mac下不是很喜欢sublime text 2 总是在新窗口中打开文件,很麻烦,文件打多了,就会出现N多窗口,虽然可以直接打开当前目录可以解决,但有时候查看其它项目中的单个文件,就比较麻烦.百度一直 ...
- 为什么方差的分母有时是n，有时是n-1 源于总体方差和样本方差的不同
为什么样本方差(sample variance)的分母是 n-1? 样本方差计算公式里分母为n-1的目的是为了让方差的估计是无偏的.无偏的估计(unbiased estimator)比有偏估计(bia ...
- css文件和js文件后面带一个问号----2015-1103
经常看一些网站页面源代码中的css文件和js文件后面带一个问号,后面跟着一连串数字或字符,这是干什么用的? 这个方法我也用过,而且很好用?,它的作用有两个:1.作为版本号,让自己方便记忆.查找:2.作 ...