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

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

开发网站几乎都做过上传图片并截图，做个无刷新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是拖拽层）

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

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

Default.aspx页

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

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

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

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

View Code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Posrchev-裁剪头像</title>

<script src="!js/jquery-1.4.1.min.js" type="text/javascript"></script>

<script src="!js/cutpic.js" type="text/javascript"></script>

<script src="!js/uploadify-v2.1.4/jquery.uploadify.v2.1.4.min.js" type="text/javascript"></script>

<script src="!js/uploadify-v2.1.4/swfobject.js" type="text/javascript"></script>

<link href="!css/Main.css" rel="stylesheet" type="text/css"/>

<link href="!css/uploadify.css" rel="stylesheet" type="text/css"/>

<script type="text/javascript"> 
var imageWidth =300;
var imageHeiht =300;

        $(function(){                                              
             $('#uploadify').uploadify({
'uploader': '/!js/uploadify-v2.1.4/uploadify.swf',
'script': '/Handler/UploadAvatarHandler.ashx',                              
'cancelImg': '/!js/uploadify-v2.1.4/cancel.png',
'folder'    : '/Temp',                            
'queueID': 'fileQueue',
'auto': true,
'multi': false,      
'method' : 'get',                      
'fileExt': '*.jpg;*.png',
'fileDesc': '请选择jpg , png文件...',                  
'scriptData': null,
'sizeLimit'   : 2097152,
'onComplete': function (event, queueID, fileObj, response, data) {
if (response.indexOf('Temp') !=-1) {

                         $("#bgDiv img").remove();                      //移除截图区里image标签
                         $("#btnSave").show();                          //保存按钮显示                    
var result = response.split('$');              //得返回参数
                         
var maxVal =0;                           
if(result[1] > result[2])
                         {
                            maxVal = result[2];                            
                         }
else
                         {
                            maxVal = result[1];
                         }                        
                         $("#maxVal").val(maxVal);                     //设置截图区大小
                         
                         $("#hidImageUrl").val(result[0]);             //上传路径存入隐藏域
                      
                         ShowImg(result[0],result[1],result[2]);       //在截图区显示
                         
                         $("#uploadify").uploadifySettings('scriptData',{'LastImgUrl':$('#hidImageUrl').val()});          //更新参数
                                                   
                     }
else {
                        alert(response);
                     }
                  }
             });    


             $("#btnSave").click(function(){                                       
                $.ajax({                    
                    type: "POST",                                   
                    url: "/Handler/CutAvatarHandler.ashx",                      
                    data: {imgUrl:$('#hidImageUrl').val(),pointX:$("#x").val(),pointY:$("#y").val(),maxVal:$("#maxVal").val()},                                                                                         
                    success: function(msg) {     
if (msg.indexOf('User') !=-1) {
                            $("#imgCut").attr("src",msg);     
                        }
else
                        {
                            alert("error");
                        }                                                                              
                    },                    
                    error: function(xhr, msg, e) {                        
                        alert("error");                    
                    }                
                 });     
             });                                                  
        });



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



//{ Right: "rRight", Left: "rLeft", Up: "rUp", Down: "rDown", RightDown: "rRightDown", LeftDown: "rLeftDown", RightUp: "rRightUp", LeftUp: "rLeftUp"}
</script>

</head>
<body>
<form id="form1" runat="server">
<div class="fl avatarbg">
<div class="avatarboxbar">
<div id="bgDiv">
<div id="dragDiv">
</div>
</div>
</div>
</div>
<div class="avatarthumb">
<asp:Image ID="imgCut" ImageUrl="/!images/blank_pic.jpg" runat="server"/>
</div>
<br />
<div class="uploadimg">
<div class="upload">
<div class="uploadswf">
<input type="file" name="uploadify" id="uploadify"/>
</div>
<br />
<p id="fileQueue">
</p>
</div>
</div>
<input id="btnSave" type="button" value="保存" style="display: none;"/>
<input id="x" runat="server" type="hidden" value="0"/>
<input id="y" runat="server" type="hidden" value="0"/>
<input id="hidImageUrl" type="hidden" value=""/>
<input id="maxVal" runat="server" type="hidden" value="100"/>
</form>
</body>
</html>

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

View Code

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

using System;
using System.Web;
using System.Web.Services;
using System.Web.SessionState;
public class CutAvatarHandler : IHttpHandler, IRequiresSessionState
{

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

        System.IO.Stream stream = null;
        System.Drawing.Image originalImg = null;   //原图
        System.Drawing.Image thumbImg = null;      //缩放图       


try
        {
int minWidth = 100;   //最小宽度
            int minHeight = 100;  //最小高度
            int maxWidth = 300;  //最大宽度
            int maxHeight = 300;  //最大高度

string resultTip = string.Empty;  //返回信息

            HttpPostedFile file = context.Request.Files["Filedata"];      //上传文件      

string uploadPath = HttpContext.Current.Server.MapPath(@context.Request["folder"]);  //得到上传路径

string lastImgUrl = @context.Request.Params["LastImgUrl"];

if (!string.IsNullOrEmpty(lastImgUrl))
            {
                PubClass.FileDel(HttpContext.Current.Server.MapPath(lastImgUrl));
            }

if (file != null)
            {
if (!System.IO.Directory.Exists(uploadPath))
                {
                    System.IO.Directory.CreateDirectory(uploadPath);
                }

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

if (ext == ".jpg" || ext == ".png")
                {
string flag = "ThumbNail" + DateTime.Now.ToFileTime() + ext;

string uploadFilePath = uploadPath + "\\" + flag;   //缩放图文件路径

                    stream = file.InputStream;

                    originalImg = System.Drawing.Image.FromStream(stream);

if (originalImg.Width > minWidth && originalImg.Height > minHeight)
                    {
                        thumbImg = PubClass.GetThumbNailImage(originalImg, maxWidth, maxHeight);  //按宽、高缩放

if (thumbImg.Width > minWidth && thumbImg.Height > minWidth)
                        {
                            thumbImg.Save(uploadFilePath);

                            resultTip = @context.Request["folder"] + "\\" + flag + "$" + thumbImg.Width + "$" + thumbImg.Height;
                        }
else
                        {
                            resultTip = "图片比例不符合要求";
                        }
                    }
else
                    {
                        resultTip = "图片尺寸必须大于" + minWidth + "*" + minHeight;
                    }
                }
            }
else
            {
                resultTip = "上传文件为空";
            }

            context.Response.Write(resultTip);
        }
catch (Exception)
        {
throw;
        }
finally
        {
if (originalImg != null)
            {
                originalImg.Dispose();
            }

if (stream != null)
            {
                stream.Close();
                stream.Dispose();
            }

if (thumbImg != null)
            {
                thumbImg.Dispose();
            }

            GC.Collect();
        }


    }

public bool IsReusable
    {
get
        {
return false;
        }
    }

}

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

View Code

<%@ WebHandler Language= 
                       
                    
                     
                      



鲜花




握手




雷人




路过




鸡蛋

该文章已有0人参与评论

请发表评论

全部评论

专题导读

More+

将ASP.NET网站嵌入到MOSS站点下面的做法发布时间：2022-07-10

在ASP.NET使用javascript的一点小技巧发布时间：2022-07-10

139-2527-9053

在线客服（服务时间 9:00～18:00）

在线QQ客服

地址：深圳市南山区西丽大学城创智工业园

电邮：jeky_zhao#qq.com

移动电话：139-2527-9053

客服电话

电子邮件

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

请发表评论

全部评论

上一篇：

下一篇：

关于我们

产品与服务

解决方案

139-2527-9053