- 首先要把JqueryUI里面的JS文件与CSS样式给放到项目中的目录里面，建一个Web应用程序把下面的给放到<head>标签里面
- <link href="../Css/jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css" />
- <link href="../Css/default.css" rel="stylesheet" type="text/css" />
- <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
- <script type="text/javascript" src="/SWFUpload/swfupload.js"></script>
- <script type="text/javascript" src="/SWFUpload/handlers.js"></script>
- <script src="js/jquery-1.7.2.js" type="text/javascript"></script>
- <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 控件了。 其余的依次引入就可以了。
- <script type="text/javascript">
- var swfu;
- window.onload = function () {
- swfu = new SWFUpload({ //这个在Jquery文档中有这个方法
-
//注意这是要请求的一般处理程序后面加了一个问号action=up。在后面会详细说到的
-
upload_url: "/ashx/CutHeaderPhoto.ashx?action=up",
-
post_params: {
- "ASPSESSID": "<%=Session.SessionID %>"
- },
-
- file_size_limit: "2 MB", //说上传的文件规定大小
- file_types: "*.jpg;*.gif", //上传文件的格式
- file_types_description: "JPG Images", //上传文件的类型
- file_upload_limit: 0,
-
-
-
- swfupload_preload_handler: preLoad,
- swfupload_load_failed_handler: loadFailed,
- file_queue_error_handler: fileQueueError,
- file_dialog_complete_handler: fileDialogComplete,
- upload_progress_handler: uploadProgress,
- upload_error_handler: uploadError,
- upload_success_handler: ShowData,
- upload_complete_handler: uploadComplete,
-
- button_image_url: "/SWFUpload/images/XPButtonNoText_160x22.png",
- button_placeholder_id: "spanButtonPlaceholder",
- button_width: 160,
- button_height: 22,
- button_text: '<span class="button">择上传的图片<span class="buttonSmall">(2MB Max)</span></span>',
- button_text_style: '.button { font-family: Helvetica, Arial, sans-serif; font-size: 14pt; } .buttonSmall { font-size: 10pt; }',
- button_text_top_padding: 1,
- button_text_left_padding: 5,
-
- flash_url: "/SWFUpload/swfupload.swf",
- flash9_url: "/SWFUpload/swfupload_FP9.swf",
- custom_settings: {
- upload_target: "divFileProgressContainer"
- },
-
- debug: false
- });
- }
- //处理图片上传和截取图片的一般处理程序，在前面说到了为什么要定义一个全局的 [var str] 当上传图片成功的
- //的时候会把图片存到磁盘上，可是当截取的时候还还要取出图片，当执行上传图片的时候，
string fileName = Path.GetFileName(file.FileName);这fileName为当前上传的图片， 当截取图片的时候，再一次执行这个一般处理程序fileName里面这时就为空了，所以取不到值。所以在前台前 定义一个变量来保存上传成功的图片，当执行图片截取的时候，fileName里面就有了上次成功传的图片了。
- string action=context.Request["action"];
-
- if (action == "up")
- {
-
- HttpPostedFile file=context.Request.Files["Filedata"];
-
- string fileName = Path.GetFileName(file.FileName);
-
- string fileExt = Path.GetExtension(fileName);
-
- if (fileExt == ".jpg")
- {
-
- using (Image img = Image.FromStream(file.InputStream))
- {
-
- file.SaveAs(context.Server.MapPath("/UploadImages/"+fileName));
-
- context.Response.Write("ok:/UploadImages/"+fileName+":"+img.Width+":"+img.Height);
- }
- }
-
- else if (action == "cut"){
-
- int x=Convert.ToInt32(context.Request.Form["x"]);
- int y=Convert.ToInt32(context.Request.Form["y"]);
- int width=Convert.ToInt32(context.Request.Form["width"]);
- int height=Convert.ToInt32(context.Request.Form["height"]);
- string imgSrc = context.Request.Form["imgSrc"];
-
- using (Bitmap map =new Bitmap(width, height))
- {
-
- using (Graphics g = Graphics.FromImage(map))
- {
-
- using (Image img = Image.FromFile(context.Request.MapPath(imgSrc)))
- {
-
- g.DrawImage(img, new Rectangle(0, 0, width, height), new Rectangle(x, y, width, height), GraphicsUnit.Pixel);
-
- string newName = Guid.NewGuid().ToString().Substring(0,10);
- map.Save(context.Server.MapPath("/UploadImages/"+newName+".jpg"));
- context.Response.Write(context.Server.MapPath("/UploadImages/" + newName + ".jpg"));
- }
- }
- }
- }
- }
-
。 //上传图片
- var str;
-
- function ShowData(file, serverData) {
- str = serverData.split(":");
- if (str[0] == "ok") {
-
- $("#ImgContentId").css("backgroundImage", "url(" + str[1] + ")").css("width", str[2] + "px").css("height", str[3] + "px");
- }
- }
- //这里是截取图片的位置大小，
- $(function () {
-
- $("#CutPhotoId").draggable({ containment: 'parent' }).resizable({ containment: 'parent' });
-
- $("#btnCutPhotoId").click(function () {
-
- var y = $("#CutPhotoId").offset().top - $("#ImgContentId").offset().top;
- var x = $("#CutPhotoId").offset().left - $("#ImgContentId").offset().left;
- var width = $("#CutPhotoId").width();
- var height = $("#CutPhotoId").height();
-
- $.post("/ashx/CutHeaderPhoto.ashx", { "action": "cut", "x": parseInt(x), "y": parseInt(y), "width": parseInt(width), "height": parseInt(height), imgSrc=\'#\'" /span>function (data) {
- $("#imgSrcId").attr("src",data);
- });
- });
- });
- <form id="form1" runat="server"> //这是表单
- <div id="content">
- <div id="swfu_container" style="margin: 0px 10px;">
- <div>
- <span id="spanButtonPlaceholder"></span>
- </div>
- <div id="divFileProgressContainer" style="height: 75px;">
- </div>
- <div id="ImgContentId" style="width: 300px; height: 300px">
- <div id="CutPhotoId" style="width: 100px; height: 100px; border: 1px solid red">
- </div>
- </div>
- <input type="button" value="截取头像" id="btnCutPhotoId" />
- <img id="imgSrcId" alt="美图"/>
- </div>
- </div>
- </form>
