首页 > 代码库 > jQuery上传插件Uploadify 3.2在.NET下的详细例子
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参数说明：
| 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下的详细例子
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。