选择文件自动上传并生成缩放图上传带进度条形成预览图2.在预览区实现鼠标拖拽截图区截取图片示例截图区按缩放图小边为截图正方形长度可扩展为截图区可变形式3.点击保存截取小图保存截取图并显示在页面上并删除原缩略图示例截图-------------------------------------------------------------------------------风骚分隔线-----------------------------------------------------------------------------------------------第一步准备工作认识一些必要的东西1.无刷新上传借助于Uploadify这个基于Flash的支持多文件上传的Jquery插件很多人估计都用过了我也在不同的项目中用过很多次简单易用且功能强大美中不足插件本身对session使用有一点BUG不过能解决chromeFireFox里上传如果代码中有用Session获取不到没用过这个插件的可以去它的官网认识一下这个插件Uploadify官网http://www.uploadify.com/uploadify下载 本示例用Uploadify-v2.1.4.ziphttp://www.uploadify.com/download/uploady全属性、事件、方法介绍http://www.uploadify.com/documentation/这里对一些常用介绍一下:名称介绍类型Uploadify常用属性uploaderuploadify的swf文件的路径stringcancelImg取消按钮图片路径stringfolder上传文件夹路径stringmulti是否多文件上传booleanscript上传文件处理代码的文件路径jsonscriptData提交到script对应路径文件的参数类型method提交scriptData的方式get/poststringfileExt支持上传文件类型格式*.jpg;*.pngstringfileDesc提示于点击上传弹出选择文件框文件类型(自定义)stringsizeLimit上传大小限制byte为单位integerauto是否选择文件后自动上传booleanUploadify常用事件onAllComplete上传完成后响应functiononCancel取消时响应functionUploadify常用方法.uploadify()初始化uploadify上传.uploadifyUpload()触发上传.uploadifySettings()更新uploadify的属性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 idbgDiv div iddragDiv /div /div第二步引用资源开始编写Default.aspx页用了三个隐藏域去存截图区的左上角X坐标Y坐禁以及截图框的大小;这个要修改CutPic里设置切割要用到CutPic.js里己经做了注释;Uploadify中参数如果动态改变的可以写在像我下面写的这样去更新参数$(#uploadify).uploadifySettings(scriptData,{LastImgUrl:$(#hidImageUrl).val()}); //更新参数View Code上传图片Hander代码UploadAvatarHandler.ashxView Code切割图片Hander代码CutAvatarHandler.ashxView Code这种就可以达到我文章开头的要求了第三步修复文件开头提到Uploadify用Session在Chrome和FireFox下的Bug 身份验证也一样有这个BUG修复同理如果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 IDhdSessionId runatserver /并在页面的Load事件中把SessionID赋给隐藏域Uploadify()方法scriptData属性在做修改$(#uploadify).uploadify({ //.... scriptData: { ASPSESSID: $([id$hdSessionId]).val() }, //..... });以上操作用于修改身份验证也一样。。。第四步一些扩展CutPic.js中有一些可以扩展比如有人要求截图区域自己要可以拖动把CutPic.js图片显示截图区HTML变成这样div idbgDiv div iddragDiv div idrRightDown styleright: 0; bottom: 0; /div div idrLeftDown styleleft: 0; bottom: 0; /div div idrRightUp styleright: 0; top: 0; /div div idrLeftUp styleleft: 0; top: 0; /div div idrRight styleright: 0; top: 50%; /div div idrLeft styleleft: 0; top: 50%; /div div idrUp styletop: 0; left: 50%; /div div idrDown stylebottom: 0; left: 50%; /div /div /div再给这些新添DIV写些样式。。。^_^! 这里自己扩展吧显示区的JS加上最后一个参数