Asp.Net无刷新上传并裁剪头像

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

实现功能：

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

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

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

示例截图：

View Code

<%@ WebHandler Language="C#" Class="CutAvatarHandler" %>

using System;
using System.Web;
using System.Web.SessionState;

public class CutAvatarHandler : IHttpHandler, IRequiresSessionState
{

public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
context.Response.Charset = "utf-8";

System.Drawing.Bitmap bitmap = null;   //按截图区域生成Bitmap
System.Drawing.Image thumbImg = null;      //被截图
System.Drawing.Graphics gps = null;    //存绘图对象
System.Drawing.Image finalImg = null;  //最终图片

try
{
string pointX = context.Request.Params["pointX"];   //X坐标
string pointY = context.Request.Params["pointY"];   //Y坐标
string imgUrl = context.Request.Params["imgUrl"];   //被截图图片地址
string rlSize = context.Request.Params["maxVal"];        //截图矩形的大小

int finalWidth = 100;
int finalHeight = 100;

if (!string.IsNullOrEmpty(pointX) && !string.IsNullOrEmpty(pointY) && !string.IsNullOrEmpty(imgUrl))
{

string ext = System.IO.Path.GetExtension(imgUrl).ToLower();   //上传文件的后缀（小写）

bitmap = new System.Drawing.Bitmap(Convert.ToInt32(rlSize), Convert.ToInt32(rlSize));

thumbImg = System.Drawing.Image.FromFile(HttpContext.Current.Server.MapPath(imgUrl));

System.Drawing.Rectangle rl = new System.Drawing.Rectangle(Convert.ToInt32(pointX), Convert.ToInt32(pointY), Convert.ToInt32(rlSize), Convert.ToInt32(rlSize));   //得到截图矩形

gps = System.Drawing.Graphics.FromImage(bitmap);      //读到绘图对象

gps.DrawImage(thumbImg, 0, 0, rl, System.Drawing.GraphicsUnit.Pixel);

finalImg = PubClass.GetThumbNailImage(bitmap, finalWidth, finalHeight);

string finalPath = "/User/final" + DateTime.Now.ToFileTime() + ext;

finalImg.Save(HttpContext.Current.Server.MapPath(finalPath));

bitmap.Dispose();
thumbImg.Dispose();
gps.Dispose();
finalImg.Dispose();
GC.Collect();

PubClass.FileDel(HttpContext.Current.Server.MapPath(imgUrl));

context.Response.Write(finalPath);
}
}
catch (Exception)
{
throw;
}
}

public bool IsReusable
{
get
{
return false;
}
}

}

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

[b]第三步：修复文件开头提到Uploadify用Session在Chrome和FireFox下的Bug （身份验证也一样有这个BUG，修复同理）[/b]

如果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() },
//.....
});

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

[b]第四步：一些扩展 [/b]

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加上最后一个参数

function ShowImg(imagePath,imgWidth,imgHeight) {
var imgPath = imagePath != "" ? imagePath : "!images/ef_pic.jpg";
var ic = new ImgCropper("bgDiv", "dragDiv", imgPath, imgWidth, imgHeight, { Right: "rRight", Left: "rLeft", Up: "rUp", Down: "rDown", RightDown: "rRightDown", LeftDown: "rLeftDown", RightUp: "rRightUp", LeftUp: "rLeftUp"});
}

可能还有需求上传不要进度条，这个我没找到属性，有用过的可以指点一下，

不过这个问题没有属性也不是不可以解决的，可以在uploadify的JS文件中删除或注释掉append的这一段进度条HTML代码。

这样就做完了，Uploadify和这个CutPic.js几乎能做到所有现在能看到的上传截图功能，还有的自己扩展一下^-^!

PS：示例代码没有优化，请各位自己做做优化^_^!

Demo下载：VS08: http://files.cnblogs.com/zhongweiv/CutAvatarVS08.rar

VS10: http://files.cnblogs.com/zhongweiv/CutAvatarVS10.rar

(大家在看这个Demo时好像遇到不少问题，我帮大家转好了08和10的，各位可以下载，IIS的配置还是那样)

Demo友情提示：布署在IIS上，再看，因为示例路径全是从根目录开始

[b]对于各位看官的疑问解答： [/b]

-----------------------------------------------------------------------------------------------------------------------------------

1.Demo相关(因为个人习惯，写东西喜欢布暑在IIS中，路径从根目录开始，所以直接看，带来了些不便^_^!)

如果没有显示出FLash上传的，那一定是路径有问题

对于Demo再加些操作提示，可能很多人没有用过自定义端服务器：

　1.布暑在IIS里，设置好端口号，如果是4.0环境，应用程序连接池选择framework4.0

　2.在VS中设置，选中网站项目，右键---->属性页---->启动选项---->选择自定义服务器---->基URL填入你在IIS里设置的，比如：http://localhost:XXXX/ (XXXX代表你在IIS里设置的端口号)

3.确实，运行页面

如果用VS10转化，在IIS里布暑点击保存出来error

那有两种可能
1.连接池framework的版本你还是没选对
2,ISAPI和GCI限制里asp.net4.0没有设置为允许。。。
如果这个Demo会出错。。那你转成4.0之后编译应该就会报targetFramework的错。。。。如果实在没有什么IIS的设置经验，建议自己搜索一下或者看看IIS方面的文章

-----------------------------------------------------------------------------------------------------------------------------------

2.onComplete事件方法中几个参数的解释：

　　event:名字就很明显了
　　queueId 就是个唯一标识
　　fileObj 这是指那个文件
　　　　比如:fileObj.name 就是文件名
　　　　fileObj.size 是文件大小
　　　　上传文件的相关信息都可以用这个获得，还有创建时间，文件类型 等
　 response：这是你返回的信息
　 data：有四个属性
　　filesUploaded :上传了多少个文件
　　errors ：出现了多少个错误
　　allBytesLoaded ：总共上传文件的大小（因为它可以多文件上传）
　　speed ：这是上传速度