[ASP.NET]使用uploadify上传图片，并在uploadify按钮上生成预览图

需求

项目中有用到uploadify上传插件，给的原型就是上传成功后替换原来的图片。没办法需求在那儿，也不能修改需求吧，只能想办法解决问题了。

主要代码

修改uploadify样式：

 /*

 Uploadify

 Copyright (c) 2012 Reactive Apps, Ronnie Garcia

 Released under the MIT License <http://www.opensource.org/licenses/mit-license.php>

 */

 .uploadify {

     position: relative;

     margin-bottom: 1em;

     color:blue;

 }

 /*.uploadify-button {

     background-color: #505050;

     background-image: linear-gradient(bottom, #505050 0%, #707070 100%);

     background-image: -o-linear-gradient(bottom, #505050 0%, #707070 100%);

     background-image: -moz-linear-gradient(bottom, #505050 0%, #707070 100%);

     background-image: -webkit-linear-gradient(bottom, #505050 0%, #707070 100%);

     background-image: -ms-linear-gradient(bottom, #505050 0%, #707070 100%);

     background-image: -webkit-gradient(

         linear,

         left bottom,

         left top,

         color-stop(0, #505050),

         color-stop(1, #707070)

     );

     background-position: center top;

     background-repeat: no-repeat;

     -webkit-border-radius: 30px;

     -moz-border-radius: 30px;

     border-radius: 30px;

     border: 2px solid #808080;

     color: #FFF;

     font: bold 12px Arial, Helvetica, sans-serif;

     text-align: center;

     text-shadow: 0 -1px 0 rgba(0,0,0,0.25);

     width: 100%;

 }

 .uploadify:hover .uploadify-button {

     background-color: #606060;

     background-image: linear-gradient(top, #606060 0%, #808080 100%);

     background-image: -o-linear-gradient(top, #606060 0%, #808080 100%);

     background-image: -moz-linear-gradient(top, #606060 0%, #808080 100%);

     background-image: -webkit-linear-gradient(top, #606060 0%, #808080 100%);

     background-image: -ms-linear-gradient(top, #606060 0%, #808080 100%);

     background-image: -webkit-gradient(

         linear,

         left bottom,

         left top,

         color-stop(0, #606060),

         color-stop(1, #808080)

     );

     background-position: center bottom;

 }*/

 .uploadify-button.disabled {

     background-color: #D0D0D0;

     color: #808080;

 }

 .uploadify-queue {

     margin-bottom: 1em;

 }

 .uploadify-queue-item {

     background-color: #F5F5F5;

     -webkit-border-radius: 3px;

     -moz-border-radius: 3px;

     border-radius: 3px;

     font: 11px Verdana, Geneva, sans-serif;

     margin-top: 5px;

     max-width: 350px;

     padding: 10px;

 }

 .uploadify-error {

     background-color: #FDE5DD !important;

 }

 .uploadify-queue-item .cancel a {

     background: url('../img/uploadify-cancel.png') 0 0 no-repeat;

     float: right;

     height:    16px;

     text-indent: -9999px;

     width: 16px;

 }

 .uploadify-queue-item.completed {

     background-color: #E5E5E5;

 }

 .uploadify-progress {

     background-color: #E5E5E5;

     margin-top: 10px;

     width: 100%;

 }

 .uploadify-progress-bar {

     background-color: #0099FF;

     height: 3px;

     width: 1px;

 }

将uploadify默认样式注释。
上传按钮代码：

  <input type="hidden" id="hdId" name="name" value="1" />

             <img src="../images/logo/logo.png" alt="图标" id="imgUpload" />

uploadify是基于flash的上传插件，在客户端生成的是object对象。

通过上图可知，设置的img上传按钮在客户端由div代替，id变为imgUpload-button。知道id了就好办了。

js代码：

     <link href="JS/uploadify/css/uploadify.css" rel="stylesheet" />

     <script type="text/javascript" src="JS/jquery-1.8.0.min.js"></script>

     <script type="text/javascript" src="JS/uploadify/js/uploadify3.2.1/jquery.uploadify.js"></script>

     <script type="text/javascript">

         $(function () {

             //初始化上传插件

             InitUploadify("imgUpload");

         });

         function InitUploadify(id) {

             //上传插件初始化方法

             $('#' + id).uploadify({

                 //选择文件后是否自动上传，默认为true

                 'auto': true,

                 //单个文件大小，0为无限制，可接受KB,MB,GB等单位的字符串值 上传大文件 可参考使用手册说明

                 'fileSizeLimit': '2MB',

                 'width': 40,

                 'height': 40,

                 //文件描述

                 'fileTypeDesc': 'Files',

                 //允许上传的文件类型 以分号分割

                 'fileTypeExts': '*.gif; *.jpg; *.png;',

                 //请求方式"get"或者"post",默认为"post"

                 'method': 'post',

                 //是否允许同时选择多个文件，默认为true

                 'multi': false,

                 'buttonImage': '../images/logo/logo.png',

                 //队列的ID,一个存放上传文件div的ID

                 'queueID': 'fileQueue',

                 //FLash文件路径

                 'swf': '/JS/uploadify/js/uploadify3.2.1/uploadify.swf',

                 'onUploadStart': function (file) {

                     //传递参数

                     $("#" + id).uploadify("settings", "formData", { 'strId': $("#hdId").val() });

                 },

                 //上传文件处理后台页面

                 'uploader': 'UploadImgHandler.ashx',

                 //重写错误事件,否则在关闭自定义错误提示框后，扔弹出默认的英文信息

                 'overrideEvents': ['onSelectError', 'onDialogClose'],

                 //返回一个错误，选择文件的时候触发

                 'onSelectError': function (file, errorCode, errorMsg) {

                     switch (errorCode) {

                         case -100:

                             alert("上传的文件数量已经超出系统限制的" + $("#" + id).uploadify('settings', 'queueSizeLimit') + "个文件！");

                             break;

                         case -110:

                             alert("文件 [" + file.name + "] 大小超出系统限制的" + $("#" + id).uploadify('settings', 'fileSizeLimit') + "大小！");

                             break;

                         case -120:

                             alert("文件 [" + file.name + "] 大小异常！");

                             break;

                         case -130:

                             alert("文件 [" + file.name + "] 类型不正确！");

                             break;

                     }

                 },

                 //检测FLASH失败调用

                 'onFallback': function () {

                     alert("您未安装FLASH控件，无法上传图片！请安装FLASH控件后再试。");

                 },

                 //上传成功后触发，每个文件都触发

                 'onUploadSuccess': function (file, data, response) {

                     var result = eval('(' + data + ')');

                     if (result.imgSrc != "0") {

                         //置换按钮的背景图,uploadify在客户端生成的id为imgUpload-button

                         $("#imgUpload-button").css("background-image", "url('" + result.imgSrc + "')").attr({ "src": result.imgSrc });

                     } else {

                         alert("上传失败");

                     }

                 }

             });

         }

     </script>

需要注意，上面采用了自定义错误提示，需要

  //重写错误事件,否则在关闭自定义错误提示框后，扔弹出默认的英文信息

                 'overrideEvents': ['onSelectError', 'onDialogClose'],

不然在弹出自定义的错误信息后，关闭错误信息仍会出现英文错误信息。
将该句注释后，测试结果：

单击确定后

所以在自定义错误提示信息时需要重写事件。

['onSelectError', 'onDialogClose']

接收上传图片的一般处理程序代码：

 using System;

 using System.Collections.Generic;

 using System.Drawing;

 using System.IO;

 using System.Linq;

 using System.Web;

 namespace Wolfy.UploadifyImageDemo

 {

     /// <summary>

     /// UploadImgHandler 的摘要说明

     /// </summary>

     public class UploadImgHandler : IHttpHandler

     {

         public void ProcessRequest(HttpContext context)

         {

             context.Response.ContentType = "text/plain";

             //获取上传的文件

             HttpPostedFile httpPostedFile = context.Request.Files["Filedata"];

             //如果接收到文件则httpPostedFile不为null，则对上传的文件进行处理，否则向客户端返回0

             if (httpPostedFile != null)

             {

                 //获取文件名

                 string strfileName = httpPostedFile.FileName;

                 //获取扩展名

                 string strExt = Path.GetExtension(strfileName);

                 //允许上传的文件类型

                 string[] strExts = { ".jpg", ".png", ".gif" };

                 //如果上传的文件类型，在被允许的类型中，则保存，否则向客户端输出“不允许上传”的信息提示。

                 if (strExts.Contains(strExt))

                 {

                     string strSaveName = string.Empty;

                     string strSavePath = ConvertImageByWH(context, httpPostedFile.InputStream, , , strExt, out strSaveName);

                     string strJson = "　{ 'imgSrc': '" + strSavePath + "'} ";

                     //将文件的保存的相对路径输出到客户端

                     context.Response.Write(strJson);

                 }

                 else

                 {

                     context.Response.Write("{'imgSrc':'0'}");

                 }

             }

         }

         /// <summary>

         /// 按照给定的宽高对图片进行压缩

         /// </summary>

         /// <param name="byteImg">图片字节流</param>

         /// <param name="intImgCompressWidth">压缩后的图片宽度</param>

         /// <param name="intImgCompressHeight">压缩后的图片高度</param>

         /// <param name="strExt">扩展名</param>

         /// <param name="strSaveName">保存后的名字</param>

         /// <returns>压缩后的图片相对路径</returns>

         private string ConvertImageByWH(HttpContext context, Stream stream, int intImgCompressWidth, int intImgCompressHeight, string strExt, out string strSaveName)

         {

             //从输入流中获取上传的image对象

             using (System.Drawing.Image img = System.Drawing.Image.FromStream(stream))

             {

                 //根据压缩比例求出图片的宽度

                 int intWidth = intImgCompressWidth / intImgCompressHeight * img.Height;

                 int intHeight = img.Width * intImgCompressHeight / intImgCompressWidth;

                 //画布

                 using (System.Drawing.Bitmap bitmap = new System.Drawing.Bitmap(img, new Size(intImgCompressWidth, intImgCompressHeight)))

                 {

                     //在画布上创建画笔对象

                     using (System.Drawing.Graphics graphics = System.Drawing.Graphics.FromImage(bitmap))

                     {

                         //将图片使用压缩后的宽高,从0，0位置画在画布上

                         graphics.DrawImage(img, , , intImgCompressWidth, intImgCompressHeight);

                         //创建保存路径

                         string strSavePath = "/images/logo/";

                         //如果保存目录不存在，则创建

                         if (!Directory.Exists(context.Server.MapPath(strSavePath)))

                         {

                             Directory.CreateDirectory(context.Server.MapPath(strSavePath));

                         }

                         //定义新的文件名

                         string strfileNameNoExt = string.Empty;

                         //接收参数

                         string strId = context.Request.Params["strId"];

                         if (!string.IsNullOrEmpty(strId))

                         {

                             if (strId == "")

                             {

                                 //定义新的文件名

                                 strfileNameNoExt = Guid.NewGuid().ToString();

                             }

                         }

                         strSaveName = strfileNameNoExt + strExt;

                         //添加时如果图片已经存在则删除

                         if (File.Exists(context.Server.MapPath(strSavePath) + strSaveName))

                         {

                             File.Delete(context.Server.MapPath(strSavePath) + strSaveName);

                         }

                         //保存文件

                         bitmap.Save(context.Server.MapPath(strSavePath) + strSaveName);

                         return strSavePath + strSaveName;

                     }

                 }

             }

         }

         public bool IsReusable

         {

             get

             {

                 return false;

             }

         }

     }

 }

测试结果：
默认：

上传成功后：

总结

在项目中多少会用到一些插件，但是又不能完全适应需求，这时就需要对其进行定制的修改，这时候F12还是很管用的。

巴特西

[ASP.NET]使用uploadify上传图片，并在uploadify按钮上生成预览图

目录

需求

主要代码

总结

最新文章

热门文章