[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);
     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, 50, 50, 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, 0, 0, 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 == "1")
                            {
                                //定义新的文件名
                                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还是很管用的。