目錄
需求
項目中有用到uploadify上傳插件，給的原型就是上傳成功后替換原來的圖片。沒辦法需求在那兒，也不能修改需求吧，只能想辦法解決問題了。
主要代碼
修改uploadify樣式：
1 /* 2 Uploadify 3 Copyright (c) 2012 Reactive Apps, Ronnie Garcia 4 Released under the MIT License <http://www.opensource.org/licenses/mit-license.php> 5 */ 6 7 .uploadify { 8 position: relative; 9 margin-bottom: 1em; 10 color:blue; 11 } 12 13 /*.uploadify-button { 14 background-color: #505050; 15 background-image: linear-gradient(bottom, #505050 0%, #707070 100%); 16 background-image: -o-linear-gradient(bottom, #505050 0%, #707070 100%); 17 background-image: -moz-linear-gradient(bottom, #505050 0%, #707070 100%); 18 background-image: -webkit-linear-gradient(bottom, #505050 0%, #707070 100%); 19 background-image: -ms-linear-gradient(bottom, #505050 0%, #707070 100%); 20 background-image: -webkit-gradient( 21 linear, 22 left bottom, 23 left top, 24 color-stop(0, #505050), 25 color-stop(1, #707070) 26 ); 27 background-position: center top; 28 background-repeat: no-repeat; 29 -webkit-border-radius: 30px; 30 -moz-border-radius: 30px; 31 border-radius: 30px; 32 border: 2px solid #808080; 33 color: #FFF; 34 font: bold 12px Arial, Helvetica, sans-serif; 35 text-align: center; 36 text-shadow: 0 -1px 0 rgba(0,0,0,0.25); 37 width: 100%; 38 } 39 .uploadify:hover .uploadify-button { 40 background-color: #606060; 41 background-image: linear-gradient(top, #606060 0%, #808080 100%); 42 background-image: -o-linear-gradient(top, #606060 0%, #808080 100%); 43 background-image: -moz-linear-gradient(top, #606060 0%, #808080 100%); 44 background-image: -webkit-linear-gradient(top, #606060 0%, #808080 100%); 45 background-image: -ms-linear-gradient(top, #606060 0%, #808080 100%); 46 background-image: -webkit-gradient( 47 linear, 48 left bottom, 49 left top, 50 color-stop(0, #606060), 51 color-stop(1, #808080) 52 ); 53 background-position: center bottom; 54 }*/ 55 .uploadify-button.disabled { 56 background-color: #D0D0D0; 57 color: #808080; 58 } 59 .uploadify-queue { 60 margin-bottom: 1em; 61 } 62 .uploadify-queue-item { 63 background-color: #F5F5F5; 64 -webkit-border-radius: 3px; 65 -moz-border-radius: 3px; 66 border-radius: 3px; 67 font: 11px Verdana, Geneva, sans-serif; 68 margin-top: 5px; 69 max-width: 350px; 70 padding: 10px; 71 } 72 .uploadify-error { 73 background-color: #FDE5DD !important; 74 } 75 .uploadify-queue-item .cancel a { 76 background: url('../img/uploadify-cancel.png') 0 0 no-repeat; 77 float: right; 78 height: 16px; 79 text-indent: -9999px; 80 width: 16px; 81 } 82 .uploadify-queue-item.completed { 83 background-color: #E5E5E5; 84 } 85 .uploadify-progress { 86 background-color: #E5E5E5; 87 margin-top: 10px; 88 width: 100%; 89 } 90 .uploadify-progress-bar { 91 background-color: #0099FF; 92 height: 3px; 93 width: 1px; 94 }
將uploadify默認樣式注釋。
上傳按鈕代碼：
1 <input type="hidden" id="hdId" name="name" value="1" /> 2 <img src="../images/logo/logo.png" alt="圖標" id="imgUpload" />
uploadify是基於flash的上傳插件，在客戶端生成的是object對象。
通過上圖可知，設置的img上傳按鈕在客戶端由div代替，id變為imgUpload-button。知道id了就好辦了。
js代碼：
1 <link href="JS/uploadify/css/uploadify.css" rel="stylesheet" /> 2 <script type="text/javascript" src="JS/jquery-1.8.0.min.js"></script> 3 <script type="text/javascript" src="JS/uploadify/js/uploadify3.2.1/jquery.uploadify.js"></script> 4 <script type="text/javascript"> 5 $(function () { 6 //初始化上傳插件 7 InitUploadify("imgUpload"); 8 }); 9 function InitUploadify(id) { 10 11 //上傳插件初始化方法 12 $('#' + id).uploadify({ 13 //選擇文件后是否自動上傳，默認為true 14 'auto': true, 15 //單個文件大小，0為無限制，可接受KB,MB,GB等單位的字符串值 上傳大文件 可參考使用手冊說明 16 'fileSizeLimit': '2MB', 17 'width': 40, 18 'height': 40, 19 //文件描述 20 'fileTypeDesc': 'Files', 21 //允許上傳的文件類型 以分號分割 22 'fileTypeExts': '*.gif; *.jpg; *.png;', 23 //請求方式"get"或者"post",默認為"post" 24 'method': 'post', 25 //是否允許同時選擇多個文件，默認為true 26 'multi': false, 27 'buttonImage': '../images/logo/logo.png', 28 //隊列的ID,一個存放上傳文件div的ID 29 'queueID': 'fileQueue', 30 //FLash文件路徑 31 'swf': '/JS/uploadify/js/uploadify3.2.1/uploadify.swf', 32 'onUploadStart': function (file) { 33 //傳遞參數 34 $("#" + id).uploadify("settings", "formData", { 'strId': $("#hdId").val() }); 35 }, 36 //上傳文件處理后台頁面 37 'uploader': 'UploadImgHandler.ashx', 38 //重寫錯誤事件,否則在關閉自定義錯誤提示框后，扔彈出默認的英文信息 39 'overrideEvents': ['onSelectError', 'onDialogClose'], 40 //返回一個錯誤，選擇文件的時候觸發 41 'onSelectError': function (file, errorCode, errorMsg) { 42 switch (errorCode) { 43 case -100: 44 alert("上傳的文件數量已經超出系統限制的" + $("#" + id).uploadify('settings', 'queueSizeLimit') + "個文件！"); 45 break; 46 case -110: 47 alert("文件 [" + file.name + "] 大小超出系統限制的" + $("#" + id).uploadify('settings', 'fileSizeLimit') + "大小！"); 48 break; 49 case -120: 50 alert("文件 [" + file.name + "] 大小異常！"); 51 break; 52 case -130: 53 alert("文件 [" + file.name + "] 類型不正確！"); 54 break; 55 } 56 }, 57 //檢測FLASH失敗調用 58 'onFallback': function () { 59 alert("您未安裝FLASH控件，無法上傳圖片！請安裝FLASH控件后再試。"); 60 }, 61 //上傳成功后觸發，每個文件都觸發 62 'onUploadSuccess': function (file, data, response) { 63 var result = eval('(' + data + ')'); 64 if (result.imgSrc != "0") { 65 //置換按鈕的背景圖,uploadify在客戶端生成的id為imgUpload-button 66 $("#imgUpload-button").css("background-image", "url('" + result.imgSrc + "')").attr({ "src": result.imgSrc }); 67 } else { 68 alert("上傳失敗"); 69 } 70 } 71 72 }); 73 } 74 </script>
需要注意，上面采用了自定義錯誤提示，需要
1 //重寫錯誤事件,否則在關閉自定義錯誤提示框后，扔彈出默認的英文信息 2 'overrideEvents': ['onSelectError', 'onDialogClose'],
不然在彈出自定義的錯誤信息后，關閉錯誤信息仍會出現英文錯誤信息。
將該句注釋后，測試結果：
單擊確定后
所以在自定義錯誤提示信息時需要重寫事件。
['onSelectError', 'onDialogClose']
接收上傳圖片的一般處理程序代碼：
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.UploadifyImageDemo 9 { 10 /// <summary> 11 /// UploadImgHandler 的摘要說明 12 /// </summary> 13 public class UploadImgHandler : IHttpHandler 14 { 15 16 public void ProcessRequest(HttpContext context) 17 { 18 context.Response.ContentType = "text/plain"; 19 //獲取上傳的文件 20 HttpPostedFile httpPostedFile = context.Request.Files["Filedata"]; 21 22 //如果接收到文件則httpPostedFile不為null，則對上傳的文件進行處理，否則向客戶端返回0 23 if (httpPostedFile != null) 24 { 25 //獲取文件名 26 string strfileName = httpPostedFile.FileName; 27 28 //獲取擴展名 29 string strExt = Path.GetExtension(strfileName); 30 31 //允許上傳的文件類型 32 string[] strExts = { ".jpg", ".png", ".gif" }; 33 34 //如果上傳的文件類型，在被允許的類型中，則保存，否則向客戶端輸出“不允許上傳”的信息提示。 35 if (strExts.Contains(strExt)) 36 { 37 string strSaveName = string.Empty; 38 string strSavePath = ConvertImageByWH(context, httpPostedFile.InputStream, 50, 50, strExt, out strSaveName); 39 40 string strJson = " { 'imgSrc': '" + strSavePath + "'} "; 41 //將文件的保存的相對路徑輸出到客戶端 42 context.Response.Write(strJson); 43 44 } 45 else 46 { 47 context.Response.Write("{'imgSrc':'0'}"); 48 } 49 } 50 } 51 /// <summary> 52 /// 按照給定的寬高對圖片進行壓縮 53 /// </summary> 54 /// <param name="byteImg">圖片字節流</param> 55 /// <param name="intImgCompressWidth">壓縮后的圖片寬度</param> 56 /// <param name="intImgCompressHeight">壓縮后的圖片高度</param> 57 /// <param name="strExt">擴展名</param> 58 /// <param name="strSaveName">保存后的名字</param> 59 /// <returns>壓縮后的圖片相對路徑</returns> 60 private string ConvertImageByWH(HttpContext context, Stream stream, int intImgCompressWidth, int intImgCompressHeight, string strExt, out string strSaveName) 61 { 62 //從輸入流中獲取上傳的image對象 63 using (System.Drawing.Image img = System.Drawing.Image.FromStream(stream)) 64 { 65 //根據壓縮比例求出圖片的寬度 66 int intWidth = intImgCompressWidth / intImgCompressHeight * img.Height; 67 int intHeight = img.Width * intImgCompressHeight / intImgCompressWidth; 68 //畫布 69 using (System.Drawing.Bitmap bitmap = new System.Drawing.Bitmap(img, new Size(intImgCompressWidth, intImgCompressHeight))) 70 { 71 //在畫布上創建畫筆對象 72 using (System.Drawing.Graphics graphics = System.Drawing.Graphics.FromImage(bitmap)) 73 { 74 //將圖片使用壓縮后的寬高,從0，0位置畫在畫布上 75 graphics.DrawImage(img, 0, 0, intImgCompressWidth, intImgCompressHeight); 76 //創建保存路徑 77 string strSavePath = "/images/logo/"; 78 79 //如果保存目錄不存在，則創建 80 if (!Directory.Exists(context.Server.MapPath(strSavePath))) 81 { 82 Directory.CreateDirectory(context.Server.MapPath(strSavePath)); 83 } 84 //定義新的文件名 85 string strfileNameNoExt = string.Empty; 86 //接收參數 87 string strId = context.Request.Params["strId"]; 88 if (!string.IsNullOrEmpty(strId)) 89 { 90 if (strId == "1") 91 { 92 //定義新的文件名 93 strfileNameNoExt = Guid.NewGuid().ToString(); 94 } 95 } 96 97 strSaveName = strfileNameNoExt + strExt; 98 //添加時如果圖片已經存在則刪除 99 if (File.Exists(context.Server.MapPath(strSavePath) + strSaveName)) 100 { 101 File.Delete(context.Server.MapPath(strSavePath) + strSaveName); 102 } 103 //保存文件 104 bitmap.Save(context.Server.MapPath(strSavePath) + strSaveName); 105 return strSavePath + strSaveName; 106 } 107 } 108 } 109 } 110 public bool IsReusable 111 { 112 get 113 { 114 return false; 115 } 116 } 117 } 118 }
測試結果：
默認：
上傳成功后：
總結
在項目中多少會用到一些插件，但是又不能完全適應需求，這時就需要對其進行定制的修改，這時候F12還是很管用的。