标签:des style blog http io ar color os 使用
项目中要使用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下的详细例子
标签:des style blog http io ar color os 使用
原文地址:http://www.cnblogs.com/wolfocme110/p/4131004.html