ASP.NET+jQuery上傳頭像

發表日期：2015-09-13 文章編輯：南昌開優網絡瀏覽次數：4575 標簽：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 開發之驗證機制

欧美日韩一区二区三区四区不卡,日韩欧美视频一区二区三区四区,久久精品欧美一区二区三区不卡,国产精品久久久乱弄

ASP.NET+jQuery上傳頭像