注意：handlers.js的引用不放在其他2個引用文件夾下，放在同一個文件夾不知道出了什么錯誤。
3.添加選擇圖片按鈕和顯示圖片布局
<body> <form id="form1" runat="server"> <div><span id="spanButtonPlaceHolder"></span></div> <div id="divFilePRogressContainer" style="height: 75px;"></div> <img id="divphotoimage" /> </form></body> 4.編寫圖片上傳js代碼<script> var swfu; window.onload = function () { swfu = new SWFUpload({ // Backend Settings upload_url: "../Handler/test.ashx?cmd=upload", //一般處理程序（帶參數） post_params: { "aspSESSID": "<%=session.SessionID %>" //參數（不知道干嘛） }, // File Upload Settings file_size_limit: "2048", // 2MB //文件大小 file_types: "*.jpg", //類型 file_types_description: "JPG Images", //類型描述 file_upload_limit: "0", // Zero means unlimited //上傳限制 // Event Handler Settings - these functions as defined in 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. file_queue_error_handler: fileQueueError, file_dialog_complete_handler: fileDialogComplete, upload_progress_handler: uploadProgress, upload_error_handler: uploadError, upload_success_handler: showimage, //圖片顯示成功的調用的方法，showimage是方法 upload_complete_handler: uploadComplete, // Button settings button_image_url: "../Scripts/js/images/XPButtonNoText_160x22.png", //選擇圖片按鈕在這里設計 button_width: "160", button_height: "22", button_placeholder_id: "spanButtonPlaceHolder", //在哪里顯示（占位符） button_text: '<span class="theFont">選擇文件</span>', //按鈕顯示文字內容 button_text_style: ".theFont { font-size: 13;}", button_text_left_padding: 12, button_text_top_padding: 3, // Flash Settings flash_url: "../Scripts/swfupload/swfupload.swf", // Relative to this file swfupload.swf需要添加到引用的文件夾下 custom_settings: { upload_target: "divFileProgressContainer" //圖片上傳成功的信息內容 }, // Debug Settings debug: false }); } //圖片上傳成功后 function showimage(file, serverData) { //serverData是一般處理程序返回的文件上傳的圖片路徑 $("#divphotoimage").attr("src", serverData); }</script> 5.后臺處理
#region 上傳圖片 private void fileuloadimage(HttpContext context) { HttpPostedFile file = context.Request.Files[0]; string filename = Path.GetFileName(file.FileName); string fileXect = Path.GetExtension(filename); string filepath = context.Request.MapPath("/uploadimage/") + filename; file.SaveAs(filepath); context.Response.Write("/uploadimage/" + filename); } #endregion 6.SWFUpload.js的下載鏈接：http://pan.baidu.com/s/1mi8trVq 密碼：xjbq
第二部分：圖片截取
1、下載imgAreaselect.js 鏈接：http://pan.baidu.com/s/1eR2jFgA 密碼：dcnr
2、 完整引用如下
<link href="../imgAreaSelect/imgareaselect-default.CSS" rel="stylesheet" />
<script src="../Scripts/ui/jquery-1.4.2.js"></script>
<script src="../imgAreaSelect/jquery.imgareaselect.min.js"></script>
<script src="../Scripts/swfupload/swfupload.js"></script>
<script src="../Scripts/swfupload/swfupload.queue.js"></script>
<script src="../Scripts/js/handlers.js"></script>
3、界面布局
<form id="form1" runat="server"> <div><span id="spanButtonPlaceHolder"></span></div> <div id="divFileProgressContainer" style="height: 75px;"></div> <img id="divphotoimage" /> <input id="imagecut" type="button" value="圖像截取" /> <input type="hidden" id="imgsrc" /> <br /> <img id="cutnewimage" /> </form>4、圖片上傳成功后顯示一個截取的圖片框 function showimage(file, serverData) { $("#divphotoimage").attr("src", serverData); //將圖片給了img后就會觸發該事件，理解為創建一個div （0,0）左上角 （250，250）右下角 onSelectEnd為事件：選擇要截圖的圖片后 $("#divphotoimage").imgAreaSelect({ selectionColor: 'bule', x1: 0, y1: 0, x2: 250, y2: 250, seclectionOpacity: 0.2, onSelectEnd: preview }); $("#imgsrc").val(serverData); //將圖片路徑給隱藏域，在js里面最好不要使用全局變量，以后要用到圖片路徑 }5、圖片截取成功后數據的保存 function preview(img, selection) { //存取圖片的x、y坐標和寬度高度 $("#divphotoimage").data('x', selection.x1); $("#divphotoimage").data('y', selection.y1); $("#divphotoimage").data('w', selection.width); $("#divphotoimage").data('h', selection.height); }6.參數的取出方法和傳遞給一般處理程序的方法 $(function () { //點擊圖片截取按鈕觸發的事件 $("#imagecut").click(function () { var pars = { //傳遞的參數 x: $("#divphotoimage").data('x'), y: $("#divphotoimage").data('y'), width: $("#divphotoimage").data('w'), height: $("#divphotoimage").data('h'), imgsrc: $("#imgsrc").val(), cmd: "cut" }; $.post("../Handler/test.ashx", pars, function (data) { //一般處理程序請求的方法 $("#cutnewimage").attr("src", data); //將截取成功的圖片顯示出來 }); }) })7、后臺將傳遞的參數也是就截取的圖片畫出來，保存起來 #region 截取圖片 private void cutuploadimage(HttpContext context) { int x = Convert.ToInt32(context.Request["x"]); int y = Convert.ToInt32(context.Request["y"]); int width = Convert.ToInt32(context.Request["width"]); int height = Convert.ToInt32(context.Request["height"]); string imgsrc = context.Request["imgsrc"]; Bitmap map = new Bitmap(width, height); //創建畫布 Graphics g = Graphics.FromImage(map); //創建畫筆 Image img = Image.FromFile(context.Request.MapPath(imgsrc)); //原始圖片 //將原圖的指定范圍畫到畫布上 //第一個img參數，表示對哪張圖進行操作 //第二個參數，畫多么大 //第三個參數，畫多大的區域 //GraphicsUnit.Pixel像素單位 g.DrawImage(img, new Rectangle(0, 0, width, height), new Rectangle(x, y, width, height), GraphicsUnit.Pixel); string filecutname = Guid.NewGuid().ToString(); string fullDir = "/uploadimage/" + filecutname + ".jpg"; map.Save(context.Request.MapPath(fullDir), System.Drawing.Imaging.ImageFormat.Jpeg); context.Response.Write(fullDir); } #endregion 第三部分：完整的demo
前臺代碼：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="text.aspx.cs" Inherits="ebook.Pages.text" %><!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> <link href="../imgAreaSelect/imgareaselect-default.css" rel="stylesheet" /> <script src="../Scripts/ui/jquery-1.4.2.js"></script> <script src="../imgAreaSelect/jquery.imgareaselect.min.js"></script> <script src="../Scripts/swfupload/swfupload.js"></script> <script src="../Scripts/swfupload/swfupload.queue.js"></script> <script src="../Scripts/js/handlers.js"></script> <script> var swfu; window.onload = function () { swfu = new SWFUpload({ // Backend Settings upload_url: "../Handler/test.ashx?cmd=upload", // Relative to the SWF file post_params: { "ASPSESSID": "<%=Session.SessionID %>" }, // File Upload Settings file_size_limit: "2048", // 2MB file_types: "*.jpg", file_types_description: "JPG Images", file_upload_limit: "0", // Zero means unlimited // Event Handler Settings - these functions as defined in 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. 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 settings button_image_url: "../Scripts/js/images/XPButtonNoText_160x22.png", // Relative to the Flash file button_width: "160", button_height: "22", button_placeholder_id: "spanButtonPlaceHolder", button_text: '<span class="theFont">選擇文件</span>', button_text_style: ".theFont { font-size: 13;}", button_text_left_padding: 12, button_text_top_padding: 3, // Flash Settings flash_url: "../Scripts/swfupload/swfupload.swf", // Relative to this file custom_settings: { upload_target: "divFileProgressContainer" }, // Debug Settings debug: false }); } function showimage(file, serverData) { $("#divphotoimage").attr("src", serverData); $("#divphotoimage").imgAreaSelect({ selectionColor: 'bule', x1: 0, y1: 0, x2: 250, y2: 250, seclectionOpacity: 0.2, onSelectEnd: preview }); $("#imgsrc").val(serverData); } //確定出要截取圖像的方位數據參數 function preview(img, selection) { $("#divphotoimage").data('x', selection.x1); $("#divphotoimage").data('y', selection.y1); $("#divphotoimage").data('w', selection.width); $("#divphotoimage").data('h', selection.height); } $(function () { $("#imagecut").click(function () { var pars = { x: $("#divphotoimage").data('x'), y: $("#divphotoimage").data('y'), width: $("#divphotoimage").data('w'), height: $("#divphotoimage").data('h'), imgsrc: $("#imgsrc").val(), cmd: "cut" }; $.post("../Handler/test.ashx", pars, function (data) { $("#cutnewimage").attr("src", data); }); }) }) </script></head><body> <form id="form1" runat="server"> <div><span id="spanButtonPlaceHolder"></span></div> <div id="divFileProgressContainer" style="height: 75px;"></div> <img id="divphotoimage" /> <input id="imagecut" type="button" value="圖像截取" /> <input type="hidden" id="imgsrc" /> <br /> <img id="cutnewimage" /> </form></body></html>后臺代碼：
using System;using System.Collections.Generic;using System.Drawing;using System.Drawing.Drawing2D;using System.Drawing.Imaging;using System.IO;using System.Linq;using System.Web;namespace ebook.Handler{ /// <summary> /// test 的摘要說明 /// </summary> public class test : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string str = context.Request["cmd"]; if (str == "upload") { fileuploadimage(context); } else if (str == "cut") { cutuploadimage(context); } } #region 截取圖片 private void cutuploadimage(HttpContext context) { int x = Convert.ToInt32(context.Request["x"]); int y = Convert.ToInt32(context.Request["y"]); int width = Convert.ToInt32(context.Request["width"]); int height = Convert.ToInt32(context.Request["height"]); string imgsrc = context.Request["imgsrc"]; Bitmap map = new Bitmap(width, height); Graphics g = Graphics.FromImage(map); 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 filecutname = Guid.NewGuid().ToString(); string fullDir = "/uploadimage/" + filecutname + ".jpg"; map.Save(context.Request.MapPath(fullDir), System.Drawing.Imaging.ImageFormat.Jpeg); context.Response.Write(fullDir); } #endregion #region 上傳圖片 private void fileuploadimage(HttpContext context) { HttpPostedFile file = context.Request.Files[0]; string filename = Path.GetFileName(file.FileName); string filejpg = Path.GetExtension(filename); string guid = Guid.NewGuid().ToString(); string Dir = "/uploadimage/" + filename + guid + filejpg; file.SaveAs(context.Request.MapPath(Dir)); context.Response.Write(Dir); } #endregion public bool IsReusable { get { return false; } } }}
新聞熱點
疑難解答
