1. 首先要把JqueryUI里面的JS文件与CSS样式给放到项目中的目录里面，建一个Web应用程序把下面的给放到<head>标签里面
 
  
  1. <link href="../Css/jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css" /> 
  2.     <link href="../Css/default.css" rel="stylesheet" type="text/css" /> 
  3.     <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 
  4.     <script type="text/javascript" src="/SWFUpload/swfupload.js"></script> 
  5.     <script type="text/javascript" src="/SWFUpload/handlers.js"></script> 
  6.     <script src="js/jquery-1.7.2.js" type="text/javascript"></script> 
  7.     <script src="../SWFUpload/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script> 
 
  
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> ： 这个是IE里面的兼容问题，如果说是IE7以上的版本浏览器会在搜索框后面，有一个像被破坏的图标，一点就会让浏览器兼容Flash 控件了。 其余的依次引入就可以了。 

 
  
 
  
  1. <script type="text/javascript"> 
  2.        var swfu; 
  3.        window.onload = function () { 
  4.            swfu = new SWFUpload({ //这个在Jquery文档中有这个方法
  5.                // Backend Settings  
     //注意这是要请求的一般处理程序后面加了一个问号action=up。在后面会详细说到的

     
  6.  
                   upload_url: "/ashx/CutHeaderPhoto.ashx?action=up",

     
  7.  
                   post_params: { 
     
 
  
  1.                    "ASPSESSID": "<%=Session.SessionID %>" 
  2.                }, 
  3.                // File Upload Settings 
  4.                file_size_limit: "2 MB", //说上传的文件规定大小
  5.                file_types: "*.jpg;*.gif", //上传文件的格式
  6.                file_types_description: "JPG Images", //上传文件的类型
  7.                file_upload_limit: 0,    // Zero means unlimited 
  8.                // Event Handler Settings - these functions as defined in Handlers.js 
  9.                //  The handlers are not part of SWFUpload but are part of my website and control how 
  10.                //  my website reacts to the SWFUpload events. 
  11.                swfupload_preload_handler: preLoad, 
  12.                swfupload_load_failed_handler: loadFailed, 
  13.                file_queue_error_handler: fileQueueError, 
  14.                file_dialog_complete_handler: fileDialogComplete, 
  15.                upload_progress_handler: uploadProgress, 
  16.                upload_error_handler: uploadError, 
  17.                upload_success_handler: ShowData, 
  18.                upload_complete_handler: uploadComplete, 
  19.                // Button settings 
  20.                button_p_w_picpath_url: "/SWFUpload/p_w_picpaths/XPButtonNoText_160x22.png", 
  21.                button_placeholder_id: "spanButtonPlaceholder", 
  22.                button_width: 160, 
  23.                button_height: 22, 
  24.                button_text: '<span class="button">择上传的图片<span class="buttonSmall">(2MB Max)</span></span>', 
  25.                button_text_style: '.button { font-family: Helvetica, Arial, sans-serif; font-size: 14pt; } .buttonSmall { font-size: 10pt; }', 
  26.                button_text_top_padding: 1, 
  27.                button_text_left_padding: 5, 
  28.                // Flash Settings 
  29.                flash_url: "/SWFUpload/swfupload.swf", // Relative to this file 
  30.                flash9_url: "/SWFUpload/swfupload_FP9.swf", // Relative to this file 
  31.                custom_settings: { 
  32.                    upload_target: "divFileProgressContainer" 
  33.                }, 
  34.                // Debug Settings 
  35.                debug: false 
  36.            }); 
  37.        } 
 
  
 
  
  1.  //处理图片上传和截取图片的一般处理程序，在前面说到了为什么要定义一个全局的 [var str] 当上传图片成功的 
  2.  //的时候会把图片存到磁盘上，可是当截取的时候还还要取出图片，当执行上传图片的时候，
          string fileName = Path.GetFileName(file.FileName);这fileName为当前上传的图片，       当截取图片的时候，再一次执行这个一般处理程序fileName里面这时就为空了，所以取不到值。所以在前台前       定义一个变量来保存上传成功的图片，当执行图片截取的时候，fileName里面就有了上次成功传的图片了。       //取到文件的提交方式，是上传文件还是截取文件 
     
    
    1.            string action=context.Request["action"];//不明确是上传图片还截取图片 
    2.            //当这个action==up的时候说明是上传图片 
    3.            if (action == "up") 
    4.            {  
    5.                //创建一个单独访问文件的对象，FileData是Jquery封装好的 
    6.                HttpPostedFile file=context.Request.Files["Filedata"]; 
    7.                //返回字符串file的路径和扩展名 
    8.                string fileName = Path.GetFileName(file.FileName); 
    9.                //得到这个字符串file的扩展名 
    10.                string fileExt = Path.GetExtension(fileName); 
    11.                //判断图片的后缀名 
    12.                if (fileExt == ".jpg") 
    13.                { 
    14.                    //用Image来创建一个对象，用流的方式输出这个图片file.InputStream 
    15.                    using (Image img = Image.FromStream(file.InputStream)) 
    16.                    { 
    17.                        //得到图片的物理路径，把图片保存起来 
    18.                        file.SaveAs(context.Server.MapPath("/UploadImages/"+fileName)); 
    19.                        //得到图片的大小 
    20.                        context.Response.Write("ok:/UploadImages/"+fileName+":"+img.Width+":"+img.Height); 
    21.                    } 
    22.                } 
    23.                    //是cut就是说明是截取图片 
    24.                else if (action == "cut"){  
    25.                //来取到x,y,width,height 
    26.                    int x=Convert.ToInt32(context.Request.Form["x"]); 
    27.                    int y=Convert.ToInt32(context.Request.Form["y"]); 
    28.                    int width=Convert.ToInt32(context.Request.Form["width"]); 
    29.                    int height=Convert.ToInt32(context.Request.Form["height"]); 
    30.                    string imgSrc = context.Request.Form["imgSrc"]; 
    31.                    //创建一个画板对象 
    32.                    using (Bitmap map =new Bitmap(width, height)) 
    33.                    {  
    34.                        //创建一个画笔,而且是在这Bitmap上面画的所以要用Graphics.FromImage(map) 
    35.                        using (Graphics g = Graphics.FromImage(map)) 
    36.                        { 
    37.                            //创建一个图片的对象，取到这个要在那里显示截取的图上 
    38.                            using (Image img = Image.FromFile(context.Request.MapPath(imgSrc))) 
    39.                            { 
    40.                                //用这个画笔来取到这个要画的图片的大小和位置 
    41.                                g.DrawImage(img, new Rectangle(0, 0, width, height), new Rectangle(x, y, width, height), GraphicsUnit.Pixel); 
    42.                                //给截取的图片重新定义一个名字给存起来 
    43.                                string newName = Guid.NewGuid().ToString().Substring(0,10); 
    44.                                map.Save(context.Server.MapPath("/UploadImages/"+newName+".jpg")); 
    45.                                context.Response.Write(context.Server.MapPath("/UploadImages/" + newName + ".jpg")); 
    46.                            } 
    47.                        } 
    48.                    } 
    49.                } 
    50.            } 
     
  3.        
    //定义一个全局的变量来接收服务器端传回的数据。 //上传图片
     
  4.  var str; 
  5.        //参数为文件，有服务器端的数据 
  6.        function ShowData(file, serverData) { 
  7.            str = serverData.split(":"); //把这个数据从冒号截取 
  8.            if (str[0] == "ok") { //当这个 数据等于Ok的时候 
  9.            //在这个层里面显示图片内容，定义图片的宽和高 
  10.                $("#ImgContentId").css("backgroundImage", "url(" + str[1] + ")").css("width", str[2] + "px").css("height", str[3] + "px"); 
  11.            } 
  12.        } 
 
  
 
  
  1. //定义一个方法匿名方法  //这里是截取图片的位置大小，
  2.        $(function () { 
  3.            //截取图片里面  要引用一个draggable和resizable这两个是Jquery定义好的 
  4.            $("#CutPhotoId").draggable({ containment: 'parent' }).resizable({ containment: 'parent' }); 
  5.            //点击这个按钮就截取图片 
  6.            $("#btnCutPhotoId").click(function () { 
  7.                //取到这个截取图片层的x,y轴与宽和高 
  8.                var y = $("#CutPhotoId").offset().top - $("#ImgContentId").offset().top; 
  9.                var x = $("#CutPhotoId").offset().left - $("#ImgContentId").offset().left; 
  10.                var width = $("#CutPhotoId").width(); 
  11.                var height = $("#CutPhotoId").height(); 
  12.                //用Ajax的异步请求 post提交数据 
  13.                $.post("/ashx/CutHeaderPhoto.ashx", { "action": "cut", "x": parseInt(x), "y": parseInt(y), "width": parseInt(width), "height": parseInt(height), imgSrc: str[1] }, function (data) { 
  14.                    $("#imgSrcId").attr("src",data); 
  15.                }); 
  16.            }); 
  17.        }); 
 
  
 
  
  1. <form id="form1" runat="server"> //这是表单
  2.    <div id="content"> 
  3.        <div id="swfu_container" style="margin: 0px 10px;"> 
  4.            <div> 
  5.                <span id="spanButtonPlaceholder"></span> 
  6.            </div> 
  7.            <div id="divFileProgressContainer" style="height: 75px;"> 
  8.            </div> 
  9.            <div id="ImgContentId" style="width: 300px; height: 300px"> 
  10.                <div id="CutPhotoId" style="width: 100px; height: 100px; border: 1px solid red"> 
  11.                </div> 
  12.            </div> 
  13.            <input type="button" value="截取头像" id="btnCutPhotoId" />&nbsp;&nbsp; 
  14.            <img id="imgSrcId" alt="美图"/> 
  15.        </div> 
  16.    </div> 
  17.    </form>