开发网站几乎都做过上传图片并截图，做个无刷新Asp.Net上传并截图示例

选择文件，自动上传并生成缩放图（上传带进度条），形成预览图

2.在预览区，实现鼠标拖拽截图区，截取图片（示例截图区按缩放图小边为截图正方形长度，可扩展为截图区可变形式）

3.点击保存，截取小图，保存截取图并显示在页面上，并删除原缩略图

示例截图：

-------------------------------------------------------------------------------风骚分隔线-----------------------------------------------------------------------------------------------

1.无刷新上传借助于Uploadify这个基于Flash的支持多文件上传的Jquery插件，很多人估计都用过了，我也在不同的项目中用过很多次，简单易用且功能强大

（美中不足，插件本身对session使用有一点BUG，不过能解决，chrome&FireFox里上传如果代码中有用Session，获取不到）

没用过这个插件的可以去它的官网认识一下这个插件

Uploadify官网：

http://www.uploadify.com/

uploadify下载： （本示例用：Uploadify-v2.1.4.zip）

http://www.uploadify.com/download/

uploady全属性、事件、方法介绍：

http://www.uploadify.com/documentation/

这里对一些常用介绍一下:

2.裁剪图片使用CutPic.js (这个JS文件如果各位要用，要自己用心看看，注释很详细了)

源码太长，这里不贴出来，后面会提供下载

显示图片也用的CutPic里的方法

JS代码显示

function ShowImg(imagePath,imgWidth,imgHeight) { var imgPath = imagePath != "" ? imagePath : "!images/ef_pic.jpg"; var ic = new ImgCropper("bgDiv", "dragDiv", imgPath, imgWidth, imgHeight, null);

}

HTML显示部分布局（一个嵌套层级关系，外面是显示图片，里面dragDiv是拖拽层）

<div id="bgDiv"> <div id="dragDiv"> </div> </div>

Default.aspx页

用了三个隐藏域去存截图区的左上角X坐标，Y坐禁，以及截图框的大小;

这个要修改CutPic里设置切割要用到，CutPic.js里己经做了注释;

Uploadify中参数如果动态改变的，可以写在像我下面写的这样去更新参数

$("#uploadify").uploadifySettings('scriptData',{'LastImgUrl':$('#hidImageUrl').val()}); //更新参数

View Code

上传图片Hander代码（UploadAvatarHandler.ashx）

View Code

切割图片Hander代码（CutAvatarHandler.ashx）

View Code

这种就可以达到我文章开头的要求了

如果UploadAvatarHandler.ashx中要用到Session那就需求些额外的配置

在Global.asax中Application_BeginRequest加入下列代码

protected void Application_BeginRequest(object sender, EventArgs e) { //为了Uploadify在谷歌和火狐下不能上传的BUG try { string session_param_name = "ASPSESSID"; string session_cookie_name = "ASP.NET_SessionId"; if (HttpContext.Current.Request.Form[session_param_name] != null) { UpdateCookie(session_cookie_name, HttpContext.Current.Request.Form[session_param_name]); } else if (HttpContext.Current.Request.QueryString[session_param_name] != null) { UpdateCookie(session_cookie_name, HttpContext.Current.Request.QueryString[session_param_name]); } } catch { } //此处是身份验证 try { string auth_param_name = "AUTHID"; string auth_cookie_name = FormsAuthentication.FormsCookieName; if (HttpContext.Current.Request.Form[auth_param_name] != null) { UpdateCookie(auth_cookie_name, HttpContext.Current.Request.Form[auth_param_name]); } else if (HttpContext.Current.Request.QueryString[auth_param_name] != null) { UpdateCookie(auth_cookie_name, HttpContext.Current.Request.QueryString[auth_param_name]); } } catch { } }

页面中加入隐藏域

<asp:HiddenField ID="hdSessionId" runat="server" />

并在页面的Load事件中，把SessionID赋给隐藏域

Uploadify()方法scriptData属性在做修改

$('#uploadify').uploadify({ //.... 'scriptData': { 'ASPSESSID': $('[id$=hdSessionId]').val() }, //..... });

以上操作，用于修改身份验证也一样。。。

CutPic.js中有一些可以扩展

比如：有人要求截图区域自己要可以拖动

把CutPic.js图片显示，截图区HTML变成这样

<div id="bgDiv"> <div id="dragDiv"> <div id="rRightDown" style="right: 0; bottom: 0;"> </div> <div id="rLeftDown" style="left: 0; bottom: 0;"> </div> <div id="rRightUp" style="right: 0; top: 0;"> </div> <div id="rLeftUp" style="left: 0; top: 0;"> </div> <div id="rRight" style="right: 0; top: 50%;"> </div> <div id="rLeft" style="left: 0; top: 50%;"> </div> <div id="rUp" style="top: 0; left: 50%;"> </div> <div id="rDown" style="bottom: 0; left: 50%;"> </div> </div> </div>

再给这些新添DIV写些样式。。。^_^! 这里自己扩展吧

显示区的JS加上最后一个参数