周末大放送网站图片上传，水印，预览，截图
周末闲着没事，将网站中经常用到的对图片的操作做了一个总结，方便以后回顾，这里将一天的成果，贴出来，希望能帮到大家。
首先是swfupload方式的无刷新上传，关于怎么配置，按照demo 的写法，我相信只要你不是太笨，都能成功。
关于swfupload你可以去网上下，也可以点这里下载：SWFUpload_v250_beta_3_samples.rar
项目结构：
上传代码：
前台上传页面，你可以根据需要建html页，也可以建webform。这里用一般处理程序来对照片进行处理，加水印，修改文件名等操作。
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SWFUploadImage.aspx.cs" Inherits="Wolfy.ImageWeb.SWFUploadImage" %> 2 3 <!DOCTYPE html> 4 5 <html xmlns="http://www.w3.org/1999/xhtml"> 6 <head id="Head1" runat="server"> 7 <title></title> 8 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 9 <script src="../SWFUpload/swfupload.js" type="text/javascript"></script> 10 <script src="../SWFUpload/handlers.js" type="text/javascript"></script> 11 <script src="../Script/jquery-1.7.1.js"></script> 12 <script type="text/javascript"> 13 var swfu; 14 window.onload = function () { 15 swfu = new SWFUpload({ 16 // Backend Settings 17 upload_url: "/SWFUploadHandler.ashx",//交给一般处理程序来处理 18 post_params: { 19 "ASPSESSID": "<%=Session.SessionID %>" 20 }, 21 22 // File Upload Settings 23 file_size_limit: "2 MB", 24 file_types: "*.jpg;*.gif", 25 file_types_description: "JPG Images", 26 file_upload_limit: 0, // Zero means unlimited 27 28 // Event Handler Settings - these functions as defined in Handlers.js 29 // The handlers are not part of SWFUpload but are part of my website and control how 30 // my website reacts to the SWFUpload events. 31 swfupload_preload_handler: preLoad, 32 swfupload_load_failed_handler: loadFailed, 33 file_queue_error_handler: fileQueueError, 34 file_dialog_complete_handler: fileDialogComplete, 35 upload_progress_handler: uploadProgress, 36 upload_error_handler: uploadError, 37 upload_success_handler: Show,//这里修改了方法的定义。 38 upload_complete_handler: uploadComplete, 39 40 // Button settings 41 button_image_url: "/SWFUpload/images/XPButtonNoText_160x22.png", 42 button_placeholder_id: "spanButtonPlaceholder", 43 button_width: 160, 44 button_height: 22, 45 button_text: '<span class="button">选择上传图片 <span class="buttonSmall">(2 MB Max)</span></span>', 46 button_text_style: '.button { font-family: Helvetica, Arial, sans-serif; font-size: 14pt; } .buttonSmall { font-size: 10pt; }', 47 button_text_top_padding: 1, 48 button_text_left_padding: 5, 49 50 // Flash Settings 51 flash_url: "/SWFUpload/swfupload.swf", // Relative to this file 52 flash9_url: "/SWFUpload/swfupload_FP9.swf", // Relative to this file 53 54 custom_settings: { 55 upload_target: "divFileProgressContainer" 56 }, 57 58 // Debug Settings 59 debug: false 60 }); 61 } 62 //上传成功以后执行该方法 63 function Show(file, serverData) { 64 var s = serverData.split(':');//接收从服务端返回的数据，按照分号分隔 65 66 if (s[0] == "ok") { 67 $("#imgSrc").attr("src", s[1]); 68 } 69 } 70 </script> 71 </head> 72 <body> 73 <form id="form1" runat="server"> 74 75 <div id="content"> 76 77 <div id="swfu_container" style="margin: 0px 10px;"> 78 <div> 79 80 <span id="spanButtonPlaceholder"></span> 81 82 </div> 83 84 <div id="divFileProgressContainer" style="height: 75px;"></div> 85 86 <img id="imgSrc" /> 87 </div> 88 </div> 89 </form> 90 </body> 91 </html>
1 using System; 2 using System.Collections.Generic; 3 using System.Drawing; 4 using System.IO; 5 using System.Linq; 6 using System.Web; 7 8 namespace Wolfy.ImageWeb 9 { 10 /// <summary> 11 /// SWFUploadHandler 的摘要说明 12 /// </summary> 13 public class SWFUploadHandler : IHttpHandler 14 { 15 16 public void ProcessRequest(HttpContext context) 17 { 18 context.Response.ContentType = "text/plain"; 19 HttpPostedFile file = context.Request.Files["Filedata"];//获取上传的文件数据. 20 string fileName = Path.GetFileName(file.FileName);//获取上传文件的名称. 21 string fileExt = Path.GetExtension(fileName);//得到文件的扩展名. 22 23 if (fileExt == ".jpg") 24 { 25 //将上传的图片放到不同的文件夹下.(根据日期) 26 string dir = "/UploadImage/" + DateTime.Now.Year + "/" + DateTime.Now.Month + "/" + DateTime.Now.Day + "/"; 27 Directory.CreateDirectory(Path.GetDirectoryName(context.Server.MapPath(dir)));//创建文件夹. 28 //文件重命名名字 29 string fullDir = dir + DateTime.Now.ToString("yyyyMMddhhmmss") + fileExt;//构建完整的文件路径. 30 file.SaveAs(context.Server.MapPath(fullDir)); 31 context.Response.Write("ok:" + fullDir); 32 33 34 } 35 } 36 37 public bool IsReusable 38 { 39 get 40 { 41 return false; 42 } 43 } 44 } 45 }
预览和截图，水印代码(这里将他们整合在一个页面了，实在不想再建页面，在配置swfupload)，截图的时候，用到网上的一个jquery插件（可变层，可移动层）
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CutPhoto.aspx.cs" Inherits="Wolfy.ImageWeb.CutPhoto1" %> 2 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head id="Head1" runat="server"> 5 <title></title> 6 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 7 <script src="../SWFUpload/swfupload.js" type="text/javascript"></script> 8 <script src="../SWFUpload/handlers.js" type="text/javascript"></script> 9 <script src="../Script/jquery-1.7.1.js"></script> 10 <script src="Script/jquery-ui-1.8.2.custom.min.js"></script> 11 <script type="text/javascript"> 12 var swfu; 13 window.onload = function () { 14 swfu = new SWFUpload({ 15 // Backend Settings 16 upload_url: "/CutPhoto.ashx?action=up",//交给一般处理程序来处理 17 post_params: { 18 "ASPSESSID": "<%=Session.SessionID %>" 19 }, 20 21 // File Upload Settings 22 file_size_limit: "2 MB", 23 file_types: "*.jpg;*.gif", 24 file_types_description: "JPG Images", 25 file_upload_limit: 0, // Zero means unlimited 26 27 // Event Handler Settings - these functions as defined in Handlers.js 28 // The handlers are not part of SWFUpload but are part of my website and control how 29 // my website reacts to the SWFUpload events. 30 swfupload_preload_handler: preLoad, 31 swfupload_load_failed_handler: loadFailed, 32 file_queue_error_handler: fileQueueError, 33 file_dialog_complete_handler: fileDialogComplete, 34 upload_progress_handler: uploadProgress, 35 upload_error_handler: uploadError, 36 upload_success_handler: Show,//这里修改了方法的定义。 37 upload_complete_handler: uploadComplete, 38 39 // Button settings 40 button_image_url: "/SWFUpload/images/XPButtonNoText_160x22.png", 41 button_placeholder_id: "spanButtonPlaceholder", 42 button_width: 160, 43 button_height: 22, 44 button_text: '<span class="button">选择上传图片 <span class="buttonSmall">(2 MB Max)</span></span>', 45 button_text_style: '.button { font-family: Helvetica, Arial, sans-serif; font-size: 14pt; } .buttonSmall { font-size: 10pt; }', 46 button_text_top_padding: 1, 47 button_text_left_padding: 5, 48 49 // Flash Settings 50 flash_url: "/SWFUpload/swfupload.swf", // Relative to this file 51 flash9_url: "/SWFUpload/swfupload_FP9.swf", // Relative to this file 52 53 custom_settings: { 54 upload_target: "divFileProgressContainer" 55 }, 56 57 // Debug Settings 58 debug: false 59 }); 60 } 61 var s; 62 //上传成功以后执行该方法 63 function Show(file, serverData) { 64 s = serverData.split(':');//接收从服务端返回的数据，按照分号分隔 65 66 if (s[0] == "ok") { 67 //将服务端返回的图片路径作为外层DIV的背景。 68 //注意：backgroundImage:I要大写,url: 69 $("#divContent").css("backgroundImage", "url(" + s[1] + ")").css("width", s[2] + "px").css("height", s[3] + "px");//注意单位一定要加上 70 } 71 } 72 //截图 73 $(function () { 74 $("#divCut").resizable({ 75 containment: '#divContent' 76 }).draggable({ containment: 'parent' }); 77 $("#btnCut").click(function () { 78 //开始获取divCut的范围 79 //offset():表示元素相对浏览器的相对坐标. 80 var y = $("#divCut").offset().top - $("#divContent").offset().top; //得到纵坐标. 81 var x = $("#divCut").offset().left - $("#divContent").offset().left; 82 var width = $("#divCut").width(); //宽度 83 var height = $("#divCut").height(); //高度. 84 $.post("/CutPhoto.ashx", { "action": "cut", "x": parseInt(x), "y": parseInt(y), "width": parseInt(width), "height": parseInt(height), "imgSrc": s[1] }, function (data) { 85 $("#cutPhotoSrc").attr("src", data); 86 }); 87 }); 88 //打水印并预览 89 $("#waterPhoto").click(function () { 90 $.post("/CutPhoto.ashx", {"action":"water","imgSrc":s[1]},function(data){ 91 $("#waterPhoto").attr("src", data); 92 }); 93 }); 94 }); 95 </script> 96 </head> 97 <body> 98 <form id="form1" runat="server"> 99 100 <div id="content"> 101 102 <div id="swfu_container" style="margin: 0px 10px;"> 103 <div> 104 <span id="spanButtonPlaceholder"></span> 105 </div> 106 107 <div id="divFileProgressContainer" style="height: 75px;"></div> 108 109 </div> 110 </div> 111 <div id="divContent" style="width: 300px; height: 300px"> 112 <div id="divCut" style="height: 100px; width: 100px; border: 1px solid red"></div> 113 </div> 114 <input type="button" id="btnCut" value="裁剪" /> 115 <input type="button" id="btnWater" value="水印" /> 116 <img id="cutPhotoSrc" /> 117 <img id="waterPhoto" /> 118 119 </form> 120 </body> 121 </html>
1 using System; 2 using System.Collections.Generic; 3 using System.Drawing; 4 using System.IO; 5 using System.Linq; 6 using System.Web; 7 8 namespace Wolfy.ImageWeb 9 { 10 /// <summary> 11 /// CutPhoto 的摘要说明 12 /// </summary> 13 public class CutPhoto : IHttpHandler 14 { 15 16 public void ProcessRequest(HttpContext context) 17 { 18 context.Response.ContentType = "text/plain"; 19 string action = context.Request["action"]; 20 if (action == "up") 21 { 22 HttpPostedFile file = context.Request.Files["Filedata"];//获取上传的文件数据. 23 string fileName = Path.GetFileName(file.FileName);//获取上传文件的名称. 24 string fileExt = Path.GetExtension(fileName);//得到文件的扩展名. 25 26 if (fileExt == ".jpg") 27 { 28 using (Image img = Image.FromStream(file.InputStream))//根据上传的图片创建一个Image,获取图片的高度与宽度. 29 { 30 31 file.SaveAs(context.Server.MapPath("/UploadImage/" + fileName));//把图片保存起来。 32 context.Response.Write("ok:/UploadImage/" + fileName + ":" + img.Width + ":" + img.Height);//将图片路径与图片的高度与宽度返回浏览器 33 } 34 } 35 } 36 else if (action == "cut")//图片截取. 37 { 38 39 //1接收参数. 40 int x = Convert.ToInt32(context.Request.Form["x"]); 41 int y = Convert.ToInt32(context.Request.Form["y"]); 42 int width = Convert.ToInt32(context.Request.Form["width"]); 43 int height = Convert.ToInt32(context.Request.Form["height"]); 44 string imgSrc = context.Request.Form["imgSrc"]; 45 //2:创建画布 46 using (Bitmap map = new Bitmap(width, height))//将红色DIV确定范围画到画布上 47 { 48 //3;画笔 49 using (Graphics g = Graphics.FromImage(map)) 50 { 51 //4:用画笔将图片画到画布上 52 using (Image img = Image.FromFile(context.Server.MapPath(imgSrc))) 53 { 54 //1:指定的是对哪张图片进行操作. 55 //2:指定画多么大。 56 //3:画img的哪一部分. 57 g.DrawImage(img, new Rectangle(0, 0, width, height), new Rectangle(x, y, width, height), GraphicsUnit.Pixel); 58 string newfileName = Guid.NewGuid().ToString().Substring(0, 8); 59 map.Save(context.Server.MapPath("/UploadImage/" + newfileName + ".jpg"));//保存截取后的图片. 60 context.Response.Write("/UploadImage/" + newfileName + ".jpg"); 61 } 62 63 } 64 65 } 66 } 67 else if (action == "water") 68 { 69 string imgSrc = context.Request.Form["imgSrc"]; 70 //将照片作为画板 71 using (Image img = Image.FromFile(context.Server.MapPath(imgSrc))) 72 { 73 //3;画笔 74 using (Graphics g = Graphics.FromImage(img)) 75 { 76 //4:用画笔将字符串画到画布上 77 //1:指定的是对哪张图片进行操作. 78 //2:指定画多么大。 79 //3:画img的哪一部分. 80 g.DrawString("http://www.wolfy.com",new Font("华文行楷",30),new SolidBrush(Color.Red), new Rectangle(0, 0, img.Width, img.Height)); 81 string newfileName = Guid.NewGuid().ToString().Substring(0, 8); 82 img.Save(context.Server.MapPath("/UploadImage/" + newfileName + ".jpg"));//保存水印后的图片. 83 context.Response.Write("/UploadImage/" + newfileName + ".jpg"); 84 } 85 } 86 // 87 // 88 //{ 89 // //4:用画笔将图片画到画布上 90 91 // { 92 // //1:指定的是对哪张图片进行操作. 93 // //2:指定画多么大。 94 // //3:画img的哪一部分. 95 // g.DrawImage(img, new Rectangle(0, 0, width, height), new Rectangle(x, y, width, height), GraphicsUnit.Pixel); 96 // string newfileName = Guid.NewGuid().ToString().Substring(0, 8); 97 // map.Save(context.Server.MapPath("/UploadImage/" + newfileName + ".jpg"));//保存截取后的图片. 98 // context.Response.Write("/UploadImage/" + newfileName + ".jpg"); 99 100 101 102 } 103 } 104 105 public bool IsReusable 106 { 107 get 108 { 109 return false; 110 } 111 } 112 } 113 }
其实对照片的操作还有生成缩略图，我想着图片上传后，就是对照片按比例缩放，这里就不再赘述了。其实在总结的时候，遇到最让人DT的就是uploadify这个上传插件，也不知道什么地方设置错了，能上传成功，但就是不能触发事件，这里也将代码贴出来，有知道的大神，一定告诉我，这代码很折腾人啊。
这可能也是我选择swfupload放弃uploadify的原因，不能触发上传成功的事件，获取不到上传成功的图片的路径。
解决方案：
代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <script src="/uploadify/jquery-1.7.2.min.js" type="text/javascript"></script> 7 <!--<script src="/uploadify/jquery.uploadify-3.1.min.js" type="text/javascript"></script>--> 8 <script src="uploadify/jquery.uploadify.min.js"></script> 9 <link href="/uploadify/uploadify.css" rel="stylesheet" type="text/css" /> 10 <script type="text/javascript"> 11 $(document).ready(function () { 12 //.uploadify()方法创建Uploadify上传组件的一个实例。 13 $('#file_upload').uploadify({ 14 'auto': false, //关闭自动上传 15 'removeTimeout': 1, //文件队列上传完成1秒后删除 16 'swf': '/uploadify/uploadify.swf', 17 'uploader': '/uploadify/Uploadify.ashx', 18 'method': 'post', //方法，post还是get提交 19 'buttonText': '浏 览', //设置按钮文本 20 'multi': false, //允许同时上传多张图片 21 'uploadLimit': 10, //一次最多只允许上传10张图片 22 'fileTypeDesc': 'Image Files', //只允许上传图像 23 'fileTypeExts': '*.gif; *.jpg; *.png;*.dwg', //限制允许上传的图片后缀 24 'fileSizeLimit': 2048000, //限制上传的图片不得超过2M 25 'onComplete': complete, 26 'onUploadSuccess': function (file, data, response) {//每次成功上传后执行的回调函数，从服务端返回数据到前端 27 $('#' + file.id).find('.data').html(' 上传完毕'); 28 }, 29 30 'onError': error 31 32 33 }); 34 35 }); 36 function complete(event, queueID, fileObj, response, data) { 37 alert(123); 38 }; 39 function error(event, queueID, fileObj) { 40 alert("文件:" + fileObj.name + " 上传失败"); 41 } 42 </script> 43 </head> 44 <body> 45 <div id="fileQueue"> 46 </div> 47 <input id="file_upload" name="file_upload" type="file" /> 48 <p> 49 <span style="color: Red; font-size: small;">最多一次上传<b id="aLimit">10</b>张图片</span><br /> 50 <a href="javascript:$('#file_upload').uploadify('settings', 'formData', {'typeCode':document.getElementById('id_file').value});$('#file_upload').uploadify('upload','*')">上传</a> <a href="javascript:$('#file_upload').uploadify('cancel','*')">重置上传队列</a> 51 </p> 52 <input type="hidden" value="1215154" name="tmpdir" id="id_file" /> 53 <div id="showImg"> 54 <img src="#" alt="" id="image" /> 55 </div> 56 </body> 57 </html>
一般处理程序代码：
1 using System; 2 using System.Collections.Generic; 3 using System.IO; 4 using System.Linq; 5 using System.Web; 6 7 8 namespace UploadifyAndWatermark.uploadify 9 { 10 /// <summary> 11 /// Uploadify 的摘要说明 12 /// </summary> 13 public class Uploadify : IHttpHandler 14 { 15 16 public void ProcessRequest(HttpContext context) 17 { 18 context.Response.ContentType = "text/plain"; 19 context.Response.Charset = "utf-8"; 20 //接收上传的文件 21 HttpPostedFile file = context.Request.Files["Filedata"]; 22 23 if (file != null) 24 { 25 string fileName = Path.GetFileName(file.FileName);//获取上传文件的名称. 26 string fileExt = Path.GetExtension(fileName);//得到文件的扩展名. 27 28 //将上传的图片放到不同的文件夹下.(根据日期) 29 string dir = "/UploadImage/" + DateTime.Now.Year + "/" + DateTime.Now.Month + "/" + DateTime.Now.Day + "/"; 30 Directory.CreateDirectory(Path.GetDirectoryName(context.Server.MapPath(dir)));//创建文件夹. 31 //文件重命名名字 用当前时间作为新名字 保存在相应的日期文件夹下 32 string fullDir = dir + DateTime.Now.ToString("yyyyMMddhhmmss") + fileExt;//构建完整的文件路径. 33 //保存图片 34 file.SaveAs(context.Server.MapPath(fullDir)); 35 //将图片的路径返回context.Resopnse.Write(fullDir); 36 context.Response.Write("1"); 37 38 } 39 else 40 { 41 context.Response.Write("0"); 42 } 43 44 } 45 46 47 public bool IsReusable 48 { 49 get 50 { 51 return false; 52 } 53 } 54 } 55 }
这里将代码展开，方便看到的大神，知道什么原因的，不要吝啬你的一点点点点时间，拯救一下我这个为代码疯狂的小白，不胜感激！
问题：在uploadify上传成功后，为什么不触发oncompelete事件？
是否上传成功后的路径可以 context.Response.Write(路径);在oncompelete事件参数中response能获取到该路径？
Demo下载：
Wolfy.UploadifyAndWatermark.rar uploadify照片上传
Wolfy.ImageOperation.rar swfuploadify照片上传，预览，截图，水印