ASP.NET+jQuery上传头像

发表日期：2015-09-13 文章编辑：南昌开优网络浏览次数：4156 标签：ASP.NET应用,jQuery应用

一、采用UpLoadUserPhoto上传头像

1、下载配置文件及已修改的文件

2、拷入images中的图片到本项目中images/face文件夹中

3、拷入jQuery.js、ui.Core.Packed.js、ui.diraggable.parcked.js和cutpic.js文件

4、打开face.aspx文件，拷入default.aspx文件中的代码

5、拷入uploadUserPhoto.aspx文件

修改一下：

如果是session验证 : model.user u=session["user"] as model.user;

如果是票据验证则是:model.user u=DAL.GetMolde(User.Indert.Name);

6、拷入CutPhotoHelp.cs类到根目录中

7、拷入main.css文件

二、采用Jcrop裁剪图片

1、拷入jquery.js、jquery.Jcrop.js、jquery.Jcrop.css文件

2、创建文件photo.aspx 、依次引用三个文件

<form id="form1" runat="server">
<input type="hidden" id="x" name="x" />
<input type="hidden" id="y" name="y" />
<input type="hidden" id="w" name="w" />
<input type="hidden" id="h" name="h" /> 
<table class="style1">
    <tr>
        <td>
            &nbsp;
        </td>
        <td>
            <asp:FileUpload ID="fuimg" runat="server" />
            <asp:Button ID="btnUpload" runat="server" Text="上传" OnClick="btnUpload_Click" />&nbsp;
        </td>
    </tr>
    <tr>
        <td>
        </td>
        <td>
            <asp:Image ID="img" runat="server" />               
        </td>
    </tr>
    <tr>
        <td>
            <asp:HiddenField ID="hfimg" runat="server" />
        </td>
        <td>
            <input type="submit" class="input_btn" id="BtnSaveAvatar" value="确定保存" />选取图片后点击保存查看切割后图片
        </td>
    </tr>
</table>
<script type="text/javascript">
    $(document).ready(function () {
        $('#<%=img.ClientID %>').Jcrop({    //img元素执行Jcrop方法
            onChange: updateCoords,    //调用下面的updateCoords方法
            onSelect: updateCoords
        });
        var img = $("#<%=hfimg.ClientID %>").val();          //找到隐藏域
        $("#BtnSaveAvatar").click(function () {    //确定保存的单击事件
            $.ajax({
                url: "Handler.ashx?img=" + img + "",    //传入到Handler一般处理程序中 并把当前图片的url地址传入进去
                data: { 'x': $("#x").val(), 'y': $("#y").val(), 'w': $("#w").val(), 'h': $("#h").val() }, //传入的数据
                datatype: "text/json",    //json方法
                type: 'post',    //post提交
                success: function (o) { window.location.href = "default.aspx?url=" + o; }    //回调函数
            });
            return false;
        });
    });
    function updateCoords(c) {
        $('#x').val(c.x);
        $('#y').val(c.y);
        $('#w').val(c.w);
        $('#h').val(c.h);
    };      
</script>
<img src="<%=Request["url"] %>" alt="" />    //返回回调函数的新图片的url地址
</form>

3、双击上传按钮

try

{

string fimg = Xiaobin.Utility.Tool.Upload(fuimg, new string[] { ".jpg",".png",".bmp" }, 1, Server.MapPath("~/upload/"));

img.ToolTip = fimg;

img.ImageUrl = "~/upload/" + fimg;

hfimg.Value = fimg;

}

catch (Exception ex)

{

Xiaobin.Utility.Tool.Alert(ex.Message, this.Page);

}

4、在根目录中创建Handler.ashx一般处理程序

string xstr = context.Request["x"];
string ystr = context.Request["y"];
string wstr = context.Request["w"];
string hstr = context.Request["h"];
string img = context.Request.QueryString["img"];    //获取传入的img的url地址
string[] ss = img.Split('.');    //分割
string sourceFile = context.Server.MapPath("~/upload/" + img + "");    //保存到
string datedir = DateTime.Now.ToString("yyyyMMdd");    //创建日期文件夹
if (!Directory.Exists(datedir))
{
    Directory.CreateDirectory(datedir);
}
string savePath = "upload/" + datedir + "/" + Guid.NewGuid() + "." + ss[1];    //新文件保存到upload+当前日期+ 随机字符 + 传入图片的后缀(如: "jpg")
int x = 0;
int y = 0;
int w = 1;
int h = 1;        
try
{
    x = int.Parse(xstr);
    y = int.Parse(ystr);
    w = int.Parse(wstr);
    h = int.Parse(hstr);
            
}
catch { }
ImageCut ic = new ImageCut(x, y, w, h);
System.Drawing.Bitmap cuted = ic.KiCut(new System.Drawing.Bitmap(sourceFile));
string cutPath = context.Server.MapPath(savePath);
cuted.Save(cutPath, System.Drawing.Imaging.ImageFormat.Jpeg);
context.Response.Write(savePath); //输出新图片的地址。通过回调函数获取并返回

5、创建ImageCut.cs类 //裁剪图片类

public Bitmap KiCut(Bitmap b) 
{
if (b == null)
{
    return null;
}

int w = b.Width;
int h = b.Height;

if (X >= w || Y >= h)
{
    return null;
}

if (X + Width > w)
{
    Width = w - X;
}

if (Y + Height > h)
{
    Height = h - Y;
}

try
{
    Bitmap bmpOut = new Bitmap(Width, Height, PixelFormat.Format24bppRgb);

    Graphics g = Graphics.FromImage(bmpOut);
    g.DrawImage(b, new Rectangle(0, 0, Width, Height), new Rectangle(X, Y, Width, Height), GraphicsUnit.Pixel);
    g.Dispose();

    return bmpOut;
}
catch
{
    return null;
}
}

public int X = 0;
public int Y = 0;
public int Width = 120;
public int Height = 120;
public ImageCut(int x, int y, int width, int heigth)
{
X = x;
Y = y;
Width = width;
Height = heigth;
}

返回列表

上一篇：ASP.NET Web 开发之权限模块下一篇：ASP.NET Web 开发之验证机制