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

最新文章

  1. 第二天 ci执行流程
  2. jQuery 3.0 的 Data 浅析
  3. UVA 10375 Choose and divide【唯一分解定理】
  4. sphinx网址
  5. python 安装mysql-python模块
  6. oracle索引、 管理权限和角色
  7. 特定用户QQ群聊天记录导出的实现
  8. PopupWindow的使用以及ArrayAdatper.notifyDataSetChanged()无效详解
  9. C语言库函数大全及应用实例十三
  10. 【MySQL】使用 Optimizer Trace 观察SQL执行过程
  11. 《JS权威指南学习总结--6.2属性的查询和设置》
  12. mac 上node.js环境的安装与测试
  13. 一个Mini的ASP.NET Core框架的实现
  14. centos7中安装python3.7遇到的问题
  15. Node.js初探
  16. LIS (DP)_代码
  17. 解决首次访问jenkins,输入初始化默认密码之后,一直卡住问题,无法进行jenkins工具安装
  18. Mac 下安装python3.7 + pip 利用 chrome + chromedriver + selenium 自动打开网页并自动点击访问指定页面
  19. 多线程之CountDownLatch、CyclicBarrier和Semaphore
  20. WMRouter:美团外卖Android开源路由框架

热门文章

  1. Android 适配底部返回键等虚拟键盘的完美解决方案
  2. CMSG_COMPAT_ALIGN函数
  3. JavaScript_7_运算符
  4. UVALive 3523 Knights of the Round Table 圆桌骑士 (无向图点双连通分量)
  5. Android开发出现 StackOverflowError
  6. 影响一个UIView是否能正常显示的几个因素
  7. String java
  8. PAT (Basic Level) Practise (中文)- 1013. 数素数 (20)
  9. VMware的centos的配置分区
  10. 廖老师JavaScript教程高阶函数-sort用法