SwfUpload及imgareaselect使用方法
1、导入文件
Swfupload相关文件
imgareaselect截取插件相关文件
2、前端html代码
添加一个截取图片的按钮，其他为swf所需的html。
<body>
<div id="content">
<div id="swfu_container" style="margin: 0px 10px;">
<div>
<span id="spanButtonPlaceholder"></span>
</div>
<div id="divFileProgressContainer" style="height: 75px;"></div>
</div>
</div>
<input type="button" value="截取图像" id="imgbtn" />
</body>
3、前端js代码
使用的jq版本1.7的，我在使用1.10的时候，截图的框不能出来。上传成功后，显示图片，并且调用截取函数。为截取按钮绑定click函数，把宽、高、位置坐标，及路径地址等相关数据提交到后台，后台接受数据，根据这些数据截取图片。
<script type="text/javascript">
var swfu, select;
window.onload = function () {
swfu = new SWFUpload({
// Backend Settings
upload_url: "/upload.ashx",
post_params: {
"ASPSESSID": "<%=Session.SessionID %>"
}, // File Upload Settings
file_size_limit: "2 MB",
file_types: "*.jpg",
file_types_description: "JPG Images",
file_upload_limit: 0, // Zero means unlimited // Event Handler Settings - these functions as defined in Handlers.js
// The handlers are not part of SWFUpload but are part of my website and control how
// my website reacts to the SWFUpload events.
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: function (file, serverdata) {
$("#divFileProgressContainer").text("").css('height', '100%');
$("#divFileProgressContainer img").remove();
$("#divFileProgressContainer").append("<img id='imgselect' style='width:300px;height:100%;' src='" + serverdata + "' />");
select = $('#imgselect').imgAreaSelect({
selectionColor: 'white', x1: 0, y1: 0, x2: 100, y2: 100,
maxWidth: 180, minWidth: 180, minHeight: 180, maxHeight: 180,
selectionOpacity: 0.2, onSelectEnd: function (img, selection) { $('#imgselect').data('x', selection.x1); $('#imgselect').data('y', selection.y1); $('#imgselect').data('w', selection.width); $('#imgselect').data('h', selection.height); }
});
},
upload_complete_handler: function () { }, // Button settings
button_image_url: "/scripts/swfupload/images/XPButtonNoText_160x22.png",
button_placeholder_id: "spanButtonPlaceholder",
button_width: 80,
button_height: 22,
button_text: '<span class="button">图片上传</span>',
button_text_style: '.button { font-family: Helvetica, Arial, sans-serif; font-size: 14pt; } .buttonSmall { font-size: 10pt; }',
button_text_top_padding: 1,
button_text_left_padding: 5, // Flash Settings
flash_url: "/scripts/swfupload/swfupload.swf", // Relative to this file
flash9_url: "/scripts/swfupload/swfupload_FP9.swf", // Relative to this file custom_settings: {
upload_target: "divFileProgressContainer"
},
// Debug Settings
debug: false
}); }
$(function () {
$("#imgbtn").click(function () {
if (!$('#imgselect').data('w')) { //用户没有选择 那么按照默认来
$('#imgselect').data('x', 0); $('#imgselect').data('y', 0); $('#imgselect').data('w', 100); $('#imgselect').data('h', 100);
}
var pic = $('#imgselect').attr('src');
var x, y, w, h;
$.post(
"/CutImg.ashx",
{
x: $('#imgselect').data('x'), y: $('#imgselect').data('y'), w: $('#imgselect').data('w'), h: $('#imgselect').data('h'), pic: pic },
function (data) {
//把裁剪后图片加载到原处
if (data) {
$('#imgselect').imgAreaSelect({ hide: true }); //截取成功隐藏截取框
$('#imgselect').attr('src', data).css('width', '180px').css('height', '180px');
alert("截取成功");
} }); });
});
</script>
4、上传的后台代码
使用ashx一般处理程序来处理上传图片，以文件的md5值命名图片。保存完成，把图片的相对地址发送到前端。
HttpPostedFile file = context.Request.Files["Filedata"];
if (file == null)
{
context.Response.Write("上传失败");
}
else
{
string filename = Path.GetFileName(file.FileName);
string ext = Path.GetExtension(filename);
filename = MD5Helper.GetStreamMD5(file.InputStream);
string path = "/UploadImage/" + DateTime.Now.Year + "/" + DateTime.Now.Month + "/" + DateTime.Now.Day +
"/";
Directory.CreateDirectory(context.Server.MapPath(path));
file.SaveAs(context.Server.MapPath(path + filename + ext));
context.Response.Write(path + filename + ext);
}
5、图片截取后台代码
同样使用一般处理程序来处理，首先取得，用户截取的宽高，位置坐标、图片的相对路径。新建画布、画笔、加载图片。在画布上用画笔，画图片。用大图片的文件名作为小图片的文件名，存放在small文件夹内。最后把小图片的相对地址，返回到前台。
int x = Convert.ToInt32(context.Request["x"]);
int y = Convert.ToInt32(context.Request["y"]);
int width = Convert.ToInt32(context.Request["w"]);
int height = Convert.ToInt32(context.Request["h"]);
string path =context.Request["pic"]; using (Bitmap b=new Bitmap(width,height))
{
using (Graphics g=Graphics.FromImage(b))
{
using (Image i = Image.FromFile(context.Server.MapPath(path)))
{
//1、哪张图片2、画多大 3、从哪里开始画
g.DrawImage(i,new Rectangle(,,width,height),new Rectangle(x,y,width,height),GraphicsUnit.Pixel ); string bigName = path.Substring(path.LastIndexOf('/')+,path.LastIndexOf('.')--path.LastIndexOf('/')); string pathsmall = "/UploadImage/" + DateTime.Now.Year + "/" + DateTime.Now.Month + "/" + DateTime.Now.Day +
"/"+"small/";
Directory.CreateDirectory(context.Server.MapPath(pathsmall));
//不能删除大的 会提示正在被访问 b.Save(context.Server.MapPath(pathsmall + bigName + ".jpg"));
context.Response.Write(pathsmall + bigName + ".jpg"); }
}
}
SwfUpload及imgareaselect使用方法的更多相关文章
- SWFUpload
引用:http://www.cnblogs.com/2050/archive/2012/08/29/2662932.html SWFUpload是一个flash和js相结合而成的文件上传插件,其功能非 ...
- SWFUpload使用指南
SWFUpload是一个flash和js相结合而成的文件上传插件,其功能非常强大. SWFUpload的特点: 1.用flash进行上传,页面无刷新,且可自定义Flash按钮的样式; 2.可以在浏览器 ...
- swfupload 参数说明
一.配置参数对象中的常用属性及说明 属性 类型 默认值 描述 upload_url String 处理上传文件的服务器端页面的url地址,可以是绝对地址,也可以是相对地址,当为相对地址时相对的是当 ...
- swfupload使用说明
网上的例子介绍的文档真的很多.下面简单介绍一下 SWFUpload的文件上传流程是这样的: 1.引入相应的js文件 2.实例化SWFUpload对象,传入一个配置参数对象进行各方面的配置. 3.点击S ...
- SWFUpload（转载）
网上的例子介绍的文档真的很多.下面简单介绍一下 SWFUpload的文件上传流程是这样的: 1.引入相应的js文件 2.实例化SWFUpload对象,传入一个配置参数对象进行各方面的配置. 3.点击S ...
- 文件上传利器SWFUpload使用指南(转)
http://www.cnblogs.com/2050/archive/2012/08/29/2662932.html 文件上传利器SWFUpload使用指南 SWFUpload是一个flash和js ...
- 浅谈如何使用swfupload工具与struts2无缝相接
笔者在网上查找流行的上传组件,swfupload引入眼帘,受到JavaEye的一篇文章启发,历时三天,加以研究,现将心得奉上,献礼JavaEye. 由于笔者才疏学浅,经验匮乏,介绍不深入,仅供菜鸟参考 ...
- SWFUpload文件上传详解
SWFUpload是一个flash和js相结合而成的文件上传插件,其功能非常强大. SWFUpload的特点: 1.用flash进行上传,页面无刷新,且可自定义Flash按钮的样式; 2.可以在浏览器 ...
- 【转】SWFUpload使用指南
原文出自:http://www.runoob.com/w3cnote/swfupload-guide.html SWFUpload是一个flash和js相结合而成的文件上传插件,其功能非常强大.以前在 ...
随机推荐
- IE6-BUG-CSS兼容详解
1.IE6背景闪烁 如果你给链接.按钮用CSS sprites作为背景,你可能会发现在IE6下会有背景图闪烁的现象.造成这个的原因是由于IE6没有将背景图缓存,每次触发hover的时候都会重新加载,可 ...
- Thinkphp 控制器
控 制 器: 1.命名方法:新建一个主页面的控制器 controller文件夹下新建一个文件,命名为:MainController.class.php首字母都大写,称为驼峰命名法 eg: <?p ...
- 网页、php脚本的编码问题
对于程序的编码问题,做一次总结,我们清楚,从对象来说,编码可能涉及到三到四个对象 一.首先是请求终端: 这个请求终端有可能是浏览器端,从浏览器端发起网页请求:Ajax请求:也有可能是程序内部的Api调 ...
- R: for installing package 'RODBC'
Today, i try to install a package in R named 'DOBDC', while i meet a message: > install.packages( ...
- FCKEditor的用法(asp版)
1:下载FCKEditor 去www.baidu.com 搜索,我本来想上传的,但不知道怎么传.下载下来后解压到你网站的目录,最好就放在根目录下,文件夹名字就用FCKEditor:这里可以随便自己喜好 ...
- 如何打一手好Log(转)
如果项目上过线的话,那你一定知道Log是多么重要. 为什么说Log重要呢?因为上线项目不允许你调试,你只能通过Log来分析问题.这时打一手好Log的重要性绝不亚于写一手好代码.项目出问题时,你要能拿出 ...
- mysql System Tablespace
System Tablespace 数据文件配置: mysql> show variables like '%innodb_data_file_path%'; +---------------- ...
- android仿京东、淘宝商品详情页上拉查看详情
话不多说,直接上干货,基本就是一个scrollview中嵌套两个scrollview或者webview;关键点事处理好子scrollview和父scrollview的触摸.滑动事件已达到想要的效果.大 ...
- codevs1906 最长递增子序列问题
题目描述 Description 给定正整数序列x1,..... , xn .(1)计算其最长递增子序列的长度s.(2)计算从给定的序列中最多可取出多少个长度为s的递增子序列.(3)如果允许在取出的 ...
- HDU_2021——最少RMB问题
Problem Description 作为杭电的老师,最盼望的日子就是每月的8号了,因为这一天是发工资的日子,养家糊口就靠它了,呵呵但是对于学校财务处的工作人员来说,这一天则是很忙碌的一天,财务处的 ...