[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默认样式注释。
上传按钮代码：

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

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

js代码：

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

//重写错误事件,否则在关闭自定义错误提示框后，扔弹出默认的英文信息
'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;
}
}
}
}