Asp.Net无刷新上传并裁剪头像(用Jquery插件 Uploadify实现) 附完整源码

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

实现功能：

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

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/

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

名称 介绍 类型
Uploadify常用属性
uploader uploadify的swf文件的路径 string
cancelImg 取消按钮图片路径 string
folder 上传文件夹路径 string
multi 是否多文件上传 boolean
script 上传文件处理代码的文件路径 json
scriptData 提交到script对应路径文件的参数 类型
method 提交scriptData的方式（get/post） string
fileExt 支持上传文件类型（格式：.jpg;.png） string
fileDesc 提示于点击上传弹出选择文件框文件类型(自定义) string
sizeLimit 上传大小限制（byte为单位） integer
auto 是否选择文件后自动上传 boolean
Uploadify常用事件
onAllComplete 上传完成后响应 function
onCancel 取消时响应 function
Uploadify常用方法
.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是拖拽层）

复制代码

复制代码 复制代码

第二步：引用资源，开始编写

Default.aspx页

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

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

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

KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲uploadify").upl…(’#hidImageUrl’).val()}); //更新参数

View Code

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

View Code

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

View Code

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

第三步：修复文件开头提到Uploadify用Session在Chrome和FireFox下的Bug （身份验证也一样有这个BUG，修复同理）
如果UploadAvatarHandler.ashx中要用到Session那就需求些额外的配置

文件：590m.com/f/25127180-496915724-a460b1（访问密码：551685）

以下内容无关：

-------------------------------------------分割线---------------------------------------------

最近学习CNN，需要用到im2col这个函数，无奈网上没有多少使用armadillo的例子，而且armadillo库中似乎也没有这个函数，因此自己写了。
im2col的原理网上一大把，我懒得写了。

1. field<某类>
   field 是armadillo库中的类，类似于矩阵， 不过这个“矩阵”的每一个元素都是向量或者矩阵。因此用field可以作为四维输入数据使用。

2. 矩阵展开
   这个其实还挺简单，使用reshape函数将矩阵变形。不过，armadillo中变形是按照竖向变形的。比如：

1 2 3
4 5 6
7 8 9
这样的矩阵变形成1×9的向量的话：

1 4 7 2 5 8 3 6 9
会成这样。。。
但是也不影响，滤波器也是这么变得，相对位置没变呗。。

3. 排列组合
   鄙人才疏学浅，只会用一堆for循环来排列组合。。。貌似没找到更好的办法。

4. 其他细节
   像是步数、填充什么的，多注意一下就行了。

5. 实现代码
   mat im2col(field input_data, int filter_h, int filter_w, int stride, int pad)
   {
   int N, C, H, W;
   N = input_data.n_rows;
   C = input_data.n_cols;
   H = input_data(0, 0).n_rows;
   W = input_data(0, 0).n_cols;
   int out_h = (H + 2 * pad - filter_h) / stride + 1;
   int out_w = (W + 2 * pad - filter_w) / stride + 1;
   field img = input_data;
   img.for_each([H, W, pad](mat& X) {X.insert_rows(0, pad); X.insert_rows(H + pad, pad); X.insert_cols(0, pad); X.insert_cols(W + pad, pad); });
   mat col(out_h * out_w * N, C * filter_h * filter_w, fill::zeros);
   for (int n = 0, z = 0; n < N; n++)
   {
   for (int i = 0; i < out_h; i++)
   {
   for (int j = 0; j < out_w; j++, z++)
   {
   for (int k = 0; k < C; k++)
   {
   mat filter(filter_h, filter_w, fill::zeros);
   filter = img(n, k)(span(i * stride, i * stride + filter_h - 1), span(j * stride, j * stride + filter_w - 1));
   filter.reshape(1, filter_h * filter_w);
   int x = z;
   int y0 = filter_h * filter_w * k;
   int y1 = filter_h * filter_w * k + filter_h * filter_w - 1;
   col(span(x, x), span(y0, y1)) = filter;
   }
   }
   }
   }
   return col;
   }
   头文件就是声明和引用。