项目中要使用Uploadify 3.2来实现图片上传并生成缩略通的功能，特此记下来，以供各位参考！

Uploadify下载地址：http://www.uploadify.com/download/

下载下来解压后估计里面很多文件，其实有用的也就jquery.uploadify.min.js、uploadify.css、uploadify.swf和uploadify-cancel.png这四个文件。你还得下载jQuery库，我这里用的是jquery-1.7.2.min.js，另外和大多数JQ插件一样，同时也需要swfobject.js这个插件，我的是2.2的版本，东西都准备好了，那下面就开始。

前端界面：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="jqUploadify._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>无标题页</title>

    <link href="scripts/uploadify.css" rel="stylesheet" type="text/css" />

    <link href="scripts/default.css" rel="stylesheet" type="text/css" />

    <script src="scripts/jquery-1.7.2.min.js" type="text/javascript"></script>

    <script src="scripts/swfobject.js" type="text/javascript"></script>

    <script src="scripts/jquery.uploadify.min.js" type="text/javascript"></script>

    <script type="text/javascript">

    $(function(){

        $("#file_upload").uploadify({

            //开启调试

            'debug' : false,

            //是否自动上传

            'auto':false,

            'buttonText':'选择照片',

            //flash

            'swf': "scripts/uploadify.swf",

            //文件选择后的容器ID

            'queueID':'uploadfileQueue',

            'uploader':'scripts/upload.ashx',

            'width':'75',

            'height':'24',

            'multi':false,

            'fileTypeDesc':'支持的格式：',

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

            'fileSizeLimit':'1MB',

            'removeTimeout':1,

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

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

                switch(errorCode) {

                    case -100:

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

                        break;

                    case -110:

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

                        break;

                    case -120:

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

                        break;

                    case -130:

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

                        break;

                }

            },

            //检测FLASH失败调用

            'onFallback':function(){

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

            },

            //上传到服务器，服务器返回相应信息到data里

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

                //alert(data);

            }

        });

    });

    function doUplaod(){

        $('#file_upload').uploadify('upload','*');

    }

    function closeLoad(){

        $('#file_upload').uploadify('cancel','*');

    }

    </script>

</head>

<body>

    <table width="704" border="0" align="center" cellpadding="0" cellspacing="0" id="__01">

        <tr>

            <td align="center" valign="middle">

                <div id="uploadfileQueue" style="padding: 3px;">

                </div>

                <div id="file_upload">

                </div>

            </td>

        </tr>

        <tr>

            <td height="50" align="center" valign="middle">

                <img alt="" src="data:images/BeginUpload.gif" width="77" height="23" onclick="doUplaod()" style="cursor: hand" />

                <img alt="" src="data:images/CancelUpload.gif" width="77" height="23" onclick="closeLoad()" style="cursor: hand" />

            </td>

        </tr>

    </table>

</body>

</html>

后端的Handler：

using System;

using System.Collections;

using System.Data;

using System.Linq;

using System.Web;

using System.Web.Services;

using System.Web.Services.Protocols;

using System.Xml.Linq;

using System.Web.SessionState;

using System.IO;

namespace jqUploadify.scripts

{

    /// <summary>

    /// $codebehindclassname$ 的摘要说明

    /// </summary>

    [WebService(Namespace = "http://tempuri.org/")]

    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

    public class upload : IHttpHandler, IRequiresSessionState

    {

        public void ProcessRequest(HttpContext context)

        {

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

            context.Response.Charset = "utf-8";

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

            string uploadPath = context.Server.MapPath("..\\uploads\\");

            if (file != null)

            {

                if (!Directory.Exists(uploadPath))

                {

                    Directory.CreateDirectory(uploadPath);

                }

                file.SaveAs(uploadPath + file.FileName);

                //生成缩略图

                MakeThumbnail(uploadPath + file.FileName, uploadPath + "\\s\\" + file.FileName, 80, 80);

            }

        }

        private void MakeThumbnail(string sourcePath, string newPath, int width, int height)

        {

            System.Drawing.Image ig = System.Drawing.Image.FromFile(sourcePath);

            int towidth = width;

            int toheight = height;

            int x = 0;

            int y = 0;

            int ow = ig.Width;

            int oh = ig.Height;

            if ((double)ig.Width / (double)ig.Height > (double)towidth / (double)toheight)

            {

                oh = ig.Height;

                ow = ig.Height * towidth / toheight;

                y = 0;

                x = (ig.Width - ow) / 2;

            }

            else

            {

                ow = ig.Width;

                oh = ig.Width * height / towidth;

                x = 0;

                y = (ig.Height - oh) / 2;

            }

            System.Drawing.Image bitmap = new System.Drawing.Bitmap(towidth, toheight);

            System.Drawing.Graphics g = System.Drawing.Graphics.FromImage(bitmap);

            g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High;

            g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;

            g.Clear(System.Drawing.Color.Transparent);

            g.DrawImage(ig, new System.Drawing.Rectangle(0, 0, towidth, toheight), new System.Drawing.Rectangle(x, y, ow, oh), System.Drawing.GraphicsUnit.Pixel);

            try

            {

                bitmap.Save(newPath, System.Drawing.Imaging.ImageFormat.Jpeg);

            }

            catch (Exception ex)

            {

                throw ex;

            }

            finally

            {

                ig.Dispose();

                bitmap.Dispose();

                g.Dispose();

            }

        }

        public bool IsReusable

        {

            get

            {

                return false;

            }

        }

    }

}

这样我们就是实现图片上传至uploads，生成的缩略图（这里设为80*80）存放在uploads下面的s文件夹中，是不是很简单呢！当然实际使用过程你还可能碰到一下的问题：

1、在火狐下session出现丢失的情况，可以参考这里：http://www.cnblogs.com/akingyao/archive/2012/09/04/2670794.html

2、IE9出现了按钮不能点击的问题，可以参考这里：http://www.uploadify.com/forum/#/discussion/9155/uploadify-version-3-2-does-not-work-in-ie9/p1

最后贴一个Uploadify参数说明：

Uploadify Version 3.2

Options选项设置

auto    选择文件后自动上传
buttonClass    给“浏览按钮”加css的class样式
buttonCursor    鼠标移上去形状：arrow箭头、hand手型（默认）
buttonImage    鼠标移上去变换图片
buttonText    按钮文字
checkExisting    在目录中检查文件是否已上传成功（1 ture,0 false）
debug        是否显示调试框（默认不显示false）
fileObjName    设置一个名字，在服务器处理程序中根据该名字来取上传文件的数据。默认为Filedata，$tempFile = $_FILES['Filedata']['tmp_name']
fileSizeLimit    设置允许上传文件最大值B, KB, MB, GB 比如：'fileSizeLimit' : '20MB'
fileTypeDesc    选择的文件的描述。这个字符串出现在浏览文件对话框中文件类型下拉框处。默认：All Files
fileTypeExts    允许上传的文件类型。格式：'fileTypeExts' : '*.gif; *.jpg; *.png'
formData    附带值，需要通过get or post传递的额外数据，需要结合onUploadStart事件一起使用
height        “浏览按钮”高度px
itemTemplate    <itemTemplate>节点表示显示的内容。这些内容中也可以包含绑定到控件DataSource属性中元素集合的数据。
method        上传方式。默认：post
multi        选择文件时是否可以【选择多个】。默认：可以true
overrideEvents    不执行默认的onSelect事件
preventCaching    随机缓存值 默认true ，可选true和false.如果选true,那么在上传时会加入一个随机数来使每次的URL都不同,以防止缓存.但是可能与正常URL产生冲突
progressData    进度条上显示的进度:有百分比percentage和速度speed。默认百分比
queueID        给“进度条”加背景css的ID样式。文件选择后的容器ID
queueSizeLimit    允许多文件上传的数量。默认：999
removeCompleted    上传完成后队列是否自动消失。默认：true
removeTimeout    上传完成后队列多长时间后消失。默认 3秒    需要：'removeCompleted' : true,时使用
requeueErrors    队列上传出错，是否继续回滚队列，即反复尝试上传。默认：false
successTimeout    上传超时时间。文件上传完成后,等待服务器返回信息的时间(秒).超过时间没有返回的话,插件认为返回了成功。 默认：30秒
swf        swf文件的路径,本文件是插件自带的,不可用其它的代替.本参数不可省略
uploader    上传处理程序URL，本参数不可省略
uploadLimit    限制总上传文件数,默认是999。指同一时间，如果关闭浏览器后重新打开又可上传。
width        “浏览按钮”宽度px

Events 事件
onCancel    当取消一个上传队列中的文件时触发,删除时触发
onClearQueue    清除队列。当'cancel'方法带着*参数时,也就是说一次全部取消的时候触发.queueItemCount是被取消的文件个数（另外的按钮）
onDestroy    取消所有的上传队列（另外的按钮）
onDialogClose    当选择文件对话框关闭时触发,不论是点的'确定'还是'取消'都会触发.如果本事件被添加进了'overrideEvents'参数中,那么如果在选择文件时产生了错误,不会有错误提示框弹出
onDialogOpen    当选择文件框被打开时触发,没有传过来的参数
onDisable    关闭上传
onEnable    开启上传
onFallback    检测FLASH失败调用
onInit        每次初始化一个队列时触发
onQueueComplete    当队列中的所有文件上传完成时触发
onSelect    当文件从浏览框被添加到队列中时触发
onSelectError    选择文件出错时触发
onSWFReady    flash准备好时触发
onUploadComplete当一个文件上传完成时触发
onUploadError    当文件上传完成但是返回错误时触发
onUploadProgress上传汇总
onUploadStart    一个文件上传之间触发
onUploadSuccess    每个上传完成并成功的文件都会触发本事件

Methods 方法
cancel        取消一个上传队列
destroy        取消所有上传队列
disable        禁止点击“浏览按钮”
settings    返回或修改一个 uploadify实例的settings值
stop        停止当前的上传并重新添加到队列中去
upload        上传指定的文件或者所有队列中的文件

最后是DEMO的下载地址：http://download.csdn.net/detail/wangqiuyun/5665517

jQuery上传插件Uploadify 3.2在.NET下的详细例子的更多相关文章

  1. JQuery上传插件uploadify优化

    旧版的uploadify是基于flash上传的,但是总有那么些问题,让我们用的不是很舒服.今天主要分享下在项目中用uploadify遇到的一些问题,以及优化处理 官方下载 官方文档 官方演示 下面是官 ...

  2. jquery上传插件uploadify 报错http error 302 解决方法之一

    前段时间用到jquery上传插件uploadify时,始终出现系统报出 http error 302 的错误. 网上大量搜集信息,基本上都是说session值丢失的问题,根据网友提供的解决方案进行修改 ...

  3. 【转】JQuery上传插件Uploadify使用详解及错误处理

    转自:http://www.jb51.net/article/43498.htm 关于JQuery上传插件Uploadify使用详解网上一大把,基本上内容都一样.我根据网上的步骤配置完成后,会报一些错 ...

  4. JQuery上传插件Uploadify使用详解

    本文转载http://www.cnblogs.com/oec2003/archive/2010/01/06/1640027.html Uploadify是JQuery的一个上传插件,实现的效果非常不错 ...

  5. (转)JQuery上传插件Uploadify使用详解

    原文地址:http://www.cnblogs.com/oec2003/archive/2010/01/06/1640027.html Uploadify是JQuery的一个上传插件,实现的效果非常不 ...

  6. jQuery上传插件Uploadify使用帮助

    Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.它的功能特色总结如下: 支持单文件或多文件上传,可控制并发上传的文件数 在服务器端支持各种语言与之配合使用,诸如PHP, ...

  7. JQuery上传插件Uploadify使用详解 asp.net版

    先来一个实例 Uploadify插件是JQuery的一个文件支持多文件上传的上传插件,ajax异步上传,实现的效果非常不错,带进度显示.不过官方提供的实例时php版本的,本文将详细介绍Uploadif ...

  8. 文件上传利器JQuery上传插件Uploadify

    在做日常项目中,经常在后台需要上传图片等资源文件,之前使用过几次这个组件,感觉非常好用 ,但是每次使用的时候都是需要经过一番查阅,所以还不如记住在这里,以后使用的时候就翻翻. 他的官方网站如下:htt ...

  9. JQuery上传插件Uploadify详解及其中文按钮解决方案 .

    Uploadify有一个参数是 buttonText 这个无论你怎么改都不支持中文,因为插件在js里用了一个转码方法把这个参数的值转过码了,解码的地方在那个swf文件里,看不到代码,所以这条路不行. ...

随机推荐

  1. jquery控制动态生成的gridview中多列checkbox的全选反选及自动判断是否全选状态

    动态生成的Gridview的前台html代码如下:     <table class="usertableborder" cellspacing="0" ...

  2. 万方数据知识平台 TFHpple +Xpath解析

    试了一下.基本上适合全部的检索结果. - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loadi ...

  3. Android开发者指南-用户界面-拖放-Drag and Drop[原创译文]

      英文原文:http://developer.android.com/guide/topics/ui/drag-drop.html 版本:Android 4.0 r1 译者注:黄色底色为未决译文 快 ...

  4. 做SEO推广必须要做的9件事儿

    SEO推广是由网站优化网络运营媒体宣传结合的一种技术,而现在恰好就是媒体最为流行,真因为如此很多的站长之知道利用自媒体推广网站,结果推广了几年网站权重只有2到3而已,导致和谐问题的关键就是没有结合其他 ...

  5. XP下的进程静音技术（遍历进程，遍历输入模块，遍历输入函数，找到函数并HOOK） good

    很多浏览器有这种功能,实现原理都是一样.发声源基本都来自Flash,比如Flash游戏啦,视频播放器啦等等 而Flash的发声都是通过winmm.dll::waveOutWrite函数来完成,所以,我 ...

  6. [置顶] 自己动手写Web容器之TomJetty之六：动态页面引入

    传送门 ☞ 1.Web服务内功经脉 传送门 ☞ 2.让服务动起来 传送门 ☞ 3.掀起请求盖头来 传送门 ☞ 4.静态页面起步 传送门 ☞ 5.包装请求参数 在上一节,我们已经完成了TomJetty服 ...

  7. SDUT 1304-取数字问题（DFS）

    取数字问题 Time Limit: 1000ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描写叙述 给定M×N的矩阵,当中的每一个元素都是-10到10之间的整数.你的 ...

  8. 详谈隐藏Tabbar的几种方法

    如今正在写的一个项目,涉及到了使用两个TabBar,然后我须要显示当中一个的时候,然后隐藏另外一个,可是中间却出现故障了.我查了一些资料,想总结一下关于TabBar的隐藏. 第一种方法是: //隐藏t ...

  9. Button UI Kit CSS3美丽Buttonbutton

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  10. IP分类地址——a，b，c 类是如何划分的

    今天IP网络使用32位地址,点分十进制格式,如172.16.0.0.地址格式:IP地址=网络地址+主机地址 或 IP地址=主机地址+子网地址+主机地址. IP地址类型 当互联网最初的设计,为了便于网络 ...