jQuery上传插件Uploadify 3.2在.NET下的详细例子

项目中要使用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="images/BeginUpload.gif" width="77" height="23" onclick="doUplaod()" style="cursor: hand" />
                <img alt="" src="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

时间： 2024-10-05 20:33:57

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

jQuery上传插件Uploadify使用详解(转发原作者冯威)

jQuery上传插件Uploadify使用详解 本文Uploadify版本为2.1.0,已经过时,截止(2016-09-25)最新版本3.2.1的详细介绍请移步<jQuery上传插件Uploadify使用详解(3.2.1)> Uploadify是jQuery的一个上传插件,实现的效果非常不错,带进度显示.不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中的使用,您也可以点击下面的链接进行演示或下载. 官方下载 官方文档 官方演示 首先按下面的步骤来实现一个简单的

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

前段时间用到jquery上传插件uploadify时,始终出现系统报出 http error 302 的错误. 网上大量搜集信息,基本上都是说session值丢失的问题,根据网友提供的解决方案进行修改,问题并没有解决. 因此,不排除这是解决302错误的解决方法之一,但是我接下来提出另一解决方案,考虑到异步传输的问题,供大家参考(反正我是成功了). 首先是uploadify初始化: $(function() {           $('#projectfile').uploadify({    

JQuery上传插件Uploadify使用详解及错误处理

转自:http://www.jb51.net/article/43498.htm 关于JQuery上传插件Uploadify使用详解网上一大把,基本上内容都一样.我根据网上的步骤配置完成后,会报一些错误,而我根据这些错误去网上找解决方案,却没有相关资料,所以为了不让更多的朋友走弯路,我把我遇到的一些问题进行汇总,也方便我自己以后查阅. 什么是Uploadify Uploadify是JQuery的一个上传插件,支持多文件上传,实现的效果非常不错,带进度显示. 官网提供的是PHP的DEMO,在这里我

jQuery上传插件Uploadify使用详解(3.2.1)(转载)

jQuery上传插件Uploadify使用详解(3.2.1) Sep 25, 2016 | JQuery | 10733 Hits 六年前,因为工作中使用到 jQuery 的上传组件 Uploadify ,写了一篇<JQuery上传插件Uploadify使用详解>的博客来介绍 Uploadify ,其实只是将官方文档简单翻译了下.几年下来居然有50多万的访问量,而且每天通过各种搜索引擎有大几百的朋友会访问到这篇文章.六年时间 Uploadify 从当时的2.1.0到了现在的3.2.1,变化还是

jQuery上传插件Uploadify出现Http Error 302错误解决

前段时间介绍过jquery uploadify上传插件的使用方法,我在使用中遇到过Http Error 302错误问题,应该会有很多人在使用中遇到过,在此记录下来: 首 先http 302是请求被重定向的意思,这就很容易理解了,如果你的uploadify处理上传脚本有session验证,就会出现此错误,因为flash在执行 post请求的时候没有包含cookie信息,而服务器的session会根据客户端的cookie来得到SESSIONID.没有提交cookie自然 就不能获取到session,

jquery 上传插件 uploadify

官网:http://www.uploadify.com/社区:http://www.uploadify.com/forum/ 基于jQuery的文件上传插件,有flash(Uploadify)和html5(UploadFive)两个版本 特点说明:-----------------1.支持多文件上传2.支持拖放上传(html5版本)3.上传进度显示4.可自定义上传限制,包括文件大小.文件数量.文件类型5.高度可定制性 关于下载-------------------Uploadify™:基于fla

JQuery上传插件Uploadify使用详解

目录[-] Options选项设置 Events事件 Methods方法 Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中的使用,您也可以点击下面的链接进行演示或下载. 官方下载 官方文档 官方演示 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 <html xmlns="http://www.w3.org/1999/xhtml"> <he

JQuery上传插件Uploadify使用详解（转）

Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中的使用,您也可以点击下面的链接进行演示或下载. 官方下载 官方文档 官方演示 首先按下面的步骤来实现一个简单的上传功能. 1 创建Web项目,命名为JQueryUploadDemo,从官网上下载最新的版本解压后添加到项目中. 2 在项目中添加UploadHandler.ashx文件用来处理文件的上传. 3 在项目中添加UploadFil

jQuery上传插件Uploadify使用帮助

Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.它的功能特色总结如下: 支持单文件或多文件上传,可控制并发上传的文件数 在服务器端支持各种语言与之配合使用,诸如PHP,.NET,Java…… 通过参数可配置上传文件类型及大小限制 通过参数可配置是否选择文件后自动上传 易于扩展,可控制每一步骤的回调函数(onSelect, onCancel……) 通过接口参数和CSS控制外观 使用帮助: 官网地址:http://www.uploadify.com/ 官方参数配置文档