【IT168技术】开发网站几乎都做过上传图片并截图，做个无刷新Asp.Net上传并截图示例
实现功能：
选择文件，自动上传并生成缩放图(上传带进度条)，形成预览图
在预览区，实现鼠标拖拽截图区，截取图片(示例截图区按缩放图小边为截图正方形长度，可扩展为截图区可变形式)
点击保存，截取小图，保存截取图并显示在页面上，并删除原缩略图
示例截图：
准备工作，认识一些必要的东西
无刷新上传借助于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/
这里对一些常用介绍一下:
裁剪图片使用CutPic.js (这个JS文件如果各位要用，要自己用心看看，注释很详细了)
源码太长，这里不贴出来，后面会提供下载
显示图片也用的CutPic里的方法
JS代码显示
var imgPath = imagePath != "" ? imagePath : "!images/ef_pic.jpg";
var ic = new ImgCropper("bgDiv", "dragDiv", imgPath, imgWidth, imgHeight, null);
}
HTML显示部分布局(一个嵌套层级关系，外面是显示图片，里面dragDiv是拖拽层)
<div id="dragDiv">
</div>
</div>
引用资源，开始编写
Default.aspx页
用了三个隐藏域去存截图区的左上角X坐标，Y坐禁，以及截图框的大小;
这个要修改CutPic里设置切割要用到，CutPic.js里己经做了注释;
Uploadify中参数如果动态改变的，可以写在像我下面写的这样去更新参数
$("#uploadify").uploadifySettings('scriptData',{'LastImgUrl':$('#hidImageUrl').val()}); //更新参数
上传图片Hander代码(UploadAvatarHandler.ashx)
切割图片Hander代码(CutAvatarHandler.ashx)
这种就可以达到我文章开头的要求了
