1 引用文件
jquery.imgareaselect.min.cs
imgareaselect-default.js
2 代码
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SWFUpload_Demo.aspx.cs" Inherits="BookShop.Web.Test.SWFUpload_Demo" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="../../js/jquery-1.7.1.js"></script> <script src="../handlers.js"></script> <script src="../swfupload.js"></script> <script src="../../js/jquery.imgareaselect.min.js"></script> <link href="../../Css/imgareaselect-default.css" rel="stylesheet" /> <script type="text/javascript"> var swfu; window.onload = function () { swfu = new SWFUpload({ //指定要上传的路径 upload_url: "/ashx/FileUpload.ashx?action=upload", async: true, post_params: { "ASPSESSID": "<%=Session.SessionID %>" }, // File Upload Settings file_size_limit: "2 MB", file_types: "*.jpg;*.gif", file_types_description: "JPG Images", file_upload_limit: 0, // Zero means unlimited // 事件处理了的三个主要方法定义在 Handlers.js // The handlers are not part of SWFUpload but are part of my website and control how // my website reacts to the SWFUpload events. 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: showImage, upload_complete_handler: uploadComplete, // 按钮设置 button_image_url: "/SWFUpload/images/XPButtonNoText_160x22.png", button_placeholder_id: "spanButtonPlaceholder", button_ 160, button_height: 22, button_text: '<span class="button">请选择上传图片<span class="buttonSmall">(2 MB 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 Settings flash_url: "/SWFUpload/swfupload.swf", // Relative to this file flash9_url: "/SWFUpload/swfupload_FP9.swf", // Relative to this file custom_settings: { upload_target: "divFileProgressContainer" }, // Debug Settings debug: false }); } //上传成功以后调用该方法 function showImage(file, serverData) { var data = serverData.split(':'); //将上传成功的图片作为div的背景 console.log(data[0]); $("#selectbanner").attr("src", data[0]); $('#selectbanner').imgAreaSelect({ selectionColor: 'blue', x1: 0, y1: 0, x2: 100, y2: 100, selectionOpacity: 0.2, onSelectEnd: preview }); }; //选择结束以后调用该方法 function preview(img, selection) { $('#selectbanner').data('x', selection.x1); $('#selectbanner').data('y', selection.y1); $('#selectbanner').data('w', selection.width); $('#selectbanner').data('h', selection.height); }; //裁剪确认操作 $(function () { $("#btnCut").click(function () { var pic = $('#selectbanner').attr('src'); var x, y, w, h; $.post( "/ashx/FileUpload.ashx", { "x": $('#selectbanner').data('x'), "y": $('#selectbanner').data('y'), "w": $('#selectbanner').data('w'), "h": $('#selectbanner').data('h'), "pic": pic, "action": "cut", }, function (data) { //把裁剪后图片加载到原处 $('#selectbanner').attr("src", data); } ) //var pars = { // "x": $('#selectbanner').data('x'), // "y": $('#selectbanner').data('y'), // "w": $('#selectbanner').data('w'), // "h": $('#selectbanner').data('h'), // "action": "cut", // "pic": $("#selectbanner").attr("src") //}; //$.post("/ashx/FileUpload.ashx", pars, function (data) { // $("#showPhoto").attr("src",data); //}); }); }) </script> </head> <body> <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="thumbnails"></div> <input type="button" value="截取图片" id="btnCut" /> <img id="selectbanner" /> <img id="showPhoto" /> </div> </div> </form> </body> </html>
using BookShopManager.Web.Common; using System; using System.Collections.Generic; using System.Drawing; using System.IO; using System.Linq; using System.Web; namespace BookShopManager.Web.Ashx { /// <summary> /// FileUpload 的摘要说明 /// </summary> public class FileUpload : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string action = context.Request["action"]; if (action == "upload") { ProcessFileUpload(context);//图片上传 } else if (action == "cut") { ProcessCutPhoto(context);//截取图片 } else { context.Response.Write("参数错误"); } } private static void ProcessFileUpload(HttpContext context) { HttpPostedFile file = context.Request.Files["Filedata"]; if (file != null) { string fileName = Path.GetFileName(file.FileName); string fileExt = Path.GetExtension(fileName); if (fileExt == ".jpg") { string dir = "/FileUpload/" + DateTime.Now.Year + DateTime.Now.Month + DateTime.Now.Day + "/"; if (!Directory.Exists(context.Request.MapPath(dir))) { Directory.CreateDirectory(context.Request.MapPath(dir)); } string newFileName = Guid.NewGuid().ToString(); string fullDir = dir + newFileName + fileExt; file.SaveAs(context.Request.MapPath(fullDir)); context.Response.Write(fullDir); } } } private void ProcessCutPhoto(HttpContext context) { int x = ConvertHelper.ToInt(context.Request["x"]); int y = ConvertHelper.ToInt(context.Request["y"]); int w = ConvertHelper.ToInt(context.Request["w"]); int h = ConvertHelper.ToInt(context.Request["h"]); string imgSrc = context.Request["pic"];//获取上传成功的图片路径 using (Bitmap map = new Bitmap(w, h)) { using (Graphics g = Graphics.FromImage(map)) { using (Image img = Image.FromFile(context.Request.MapPath(imgSrc))) { g.DrawImage(img, new Rectangle(0, 0, w, h), new Rectangle(x, y, w, h), GraphicsUnit.Pixel); string newFileName = Guid.NewGuid().ToString(); string fullDir = "/FileUpload/" + newFileName + ".jpg"; map.Save(context.Request.MapPath(fullDir), System.Drawing.Imaging.ImageFormat.Jpeg); context.Response.Write(fullDir); } } } } public bool IsReusable { get { return false; } } } }
3 示例