日期:2014-05-16  浏览次数:20861 次

ASP.NET实现头像剪切保存

利用swfupload上传头像,利用Jcrop来实现头像在线选择,然后提交个ashx对原头像进行剪切。代码如下:

default.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="Jcrop._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>
    <title>Jcrop测试</title>
    <script type="text/javascript" src="JS/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="JS/swfupload/swfupload.js"></script>
    <script type="text/javascript" src="JS/swfupload/handlers.js"></script>
    <script type="text/javascript" src="JS/Jcrop/js/jquery.Jcrop.min.js"></script>
    <script type="text/javascript" src="JS/Jcrop/js/jquery.color.js"></script>
    <script type="text/javascript" src="JS/mytest.js"></script>
    <link href="JS/Jcrop/css/jquery.Jcrop.min.css" rel="Stylesheet" type="text/css" />
    <link href="CSS/default.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
         var swfu;
         window.onload = function () {
             swfu = new SWFUpload({
                 upload_url: "imgUpload.ashx",
                 post_params: {
                     "ASP.NET_SESSIONID": "<%=Session.SessionID %>",
                     "ASPSESSID": "<%=Session.SessionID %>"
                 },

                 file_size_limit: "1024",
                 file_types: "*.jpg",
                 file_types_description: "JPG Images",
                 file_upload_limit: "-1",

                 file_queue_error_handler: fileQueueError,
                 file_dialog_complete_handler: fileDialogComplete,
                 upload_progress_handler: uploadProgress,
                 upload_error_handler: uploadError,
                 upload_success_handler: uploadSuccess,
                 upload_complete_handler: uploadComplete,

                 button_image_url: "/Image/swfupload/XPButtonNoText_160x22.png",
                 button_width: "160",
                 button_height: "22",
                 button_placeholder_id: "spanButtonPlaceHolder1",
                 button_text: '<span class="theFont">选择文件</span>',
                 button_text_style: ".theFont { font-size: 13;}",
                 button_text_left_padding: 12,
                 button_text_top_padding: 3,
                 button_action: SWFUpload.BUTTON_ACTION.SELECT_FILE, //SWFUplaod.BUTTON_ACTION.SELECT_FILES 可以多选文件
                 flash_url: "/JS/swfupload/swfupload.swf",

                 custom_settings: {
                     upload_target: "divFileProgressContainer1"
                 },
                 debug: false
             });
         }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <table>
        <tr>
            <td height="25" width="30%" align="right">
                用户头像 :
            </td>
            <td height="25" width="*" align="left">
                <div id="swfu_container1" style="margin: 0px 10px;">
                    <div>
                        <span id="spanButtonPlaceHolder1"></span>
                    </div>
                    <div id="divFileProgressContainer