使用Uploadify实现上传图片生成缩略图例子,实时显示进度条

原文地址为:使用Uploadify实现上传图片生成缩略图例子,实时显示进度条

不了解Uploadify的,先看看前一篇详细说明

http://www.cnblogs.com/XuebinDing/archive/2012/04/26/2470995.html

Uploadify简单说来,是基于Jquery的一款文件上传插件。它的功能特色总结如下:

  1. 支持单文件或多文件上传,可控制并发上传的文件数
  2. 在服务器端支持各种语言与之配合使用,诸如PHP,.NET,Java……
  3. 通过参数可配置上传文件类型及大小限制
  4. 通过参数可配置是否选择文件后自动上传
  5. 易于扩展,可控制每一步骤的回调函数(onSelect, onCancel……)
  6. 通过接口参数和CSS控制外观
  7. 提供上传进度的事件回调,实时显示上传进度

开始之前要先下载插件安装包到本地并引用,详细实现请看代码注释,下面开始代码。
1、html 代码

<div id="webApplogo_file" style="display: block; width: 800px; background-color: #fff;">
<ul>
<li style="margin-left: 213px;"><span class="black_blod14">LOGO图标:</span></li>
<li style="margin-left: 3px;">
<input type="text" readonly="readonly" id="text_webApplogo" name="app_logo" class="appipt1" value="<%=applogo %>" /></li>
<li style="padding-top: 1px;">
<input type="file" id="webApplogo" name="webApplogo" />
</li>
<li><span style="display: none; margin-left: 5px; padding-left: 20px; color: #EA5200;
font-size: 12px; background: url('Images/icon_03.gif' ) no-repeat 0px 0px;"
id="textporApplogo">
请上传LOGO图标!
</span></li>
<li style="margin-left: 220px;"><span class="grey999" style="margin-left: 90px; float: left;">
尺寸72px*72px,png格式,建议使用 图标PSD模板 制作
</span>
<div id="QID_webApplogo" class="fileQueue"></div>
<table id="webApplogo_tab" width="50%" border="0" cellspacing="0" cellpadding="0"
align
="center" class="grey999" style="display: none; margin-left: 90px; float: left;">
<tr>
<td align="center" valign="bottom">
<img style="width: 64px; height: 64px;" id="img_64" src="images/icon_02.gif" border="0" /><br />
(64*64)
</td>
<td align="center" valign="bottom">
<img style="width: 48px; height: 48px;" id="img_48" src="images/icon_02.gif" border="0" /><br />
(48*48)
</td>
<td align="center" valign="bottom">
<img style="width: 32px; height: 32px;" id="img_32" src="images/icon_02.gif" border="0" /><br />
(32*32)
</td>
<td align="center" valign="bottom">
<img style="width: 16px; height: 16px;" id="img_16" src="images/icon_02.gif" border="0" /><br />
(16*16)
</td>
</tr>
</table>
</li>
</ul>
</div>

2、Javascript 代码(关键部分)

$("#webApplogo").uploadify({ 
'uploader': 'js/uploadify-v2.1.4/uploadify.swf',//进度条,Uploadify里面含有
'script': 'UploadApplogo.ashx',//一般处理程序
'cancelImg': 'js/uploadify-v2.1.4/cancel.png',//取消图片路径
'folder': 'Imagelogo',//上传文件夹名
'auto': true, //文件添加到上传队列后,自动进行上传。默认为false
'multi': false,//是否允许多文件上传。默认为false
'fileExt':'*.gif;*.jpg;*.jpeg;*.png',//允许上传的文件类型,使用分号(”;)”分割 例如:*.jpg;*.gif,默认为null(所有文件类型)
'fileDesc':'不超过2M的图片 (*.gif;*.jpg;*.png)',
'sizeLimit': 2048000, //允许上传的文件大小(kb) 此为2M
'onSelectOnce': function(event,data) { //在单文件或多文件上传时,选择文件时触发
//event 事件对象(the event object)
//data 选择的操作信息
//data.filesSelected 选择文件操作中选中的文件数量
$('#status-message').text(data.filesSelected + ' 文件正在等待上传…….');
},
'onComplete': function(event, queueID, fileObj, response, data) {//当单个文件上传完成后触发
//event:事件对象(the event object)
//ID:该文件在文件队列中的唯一表示
//fileObj:选中文件的对象,他包含的属性列表
//response:服务器端返回的Response文本,我这里返回的是处理过的文件名称
//data:文件队列详细信息和文件上传的一般数据

alert(
"文件:" + fileObj.name + " 上传成功!");
//设置图片名称
$("#applogo").attr("value",response);
//设置输入框的值
$("#text_webApplogo").attr("value",fileObj.name);
//设置图片路径
$("#img_64").attr("src","Imagelogo/64_"+response);
$(
"#img_48").attr("src","Imagelogo/48_"+response);
$(
"#img_32").attr("src","Imagelogo/32_"+response);
$(
"#img_16").attr("src","Imagelogo/16_"+response);
//图片路径设置完成后,显示图片
$("#webApplogo_tab").css("display","block");
},
'onError': function(event, queueID, fileObj) {//当单个文件上传出错时触发
alert("文件:" + fileObj.name + " 上传失败!");
},
'buttonImg':'Images/bn_04.gif',//浏览按钮的图片路径
'width':60,//浏览按钮的宽和高
'height':24
,
'queueID':'QID_webApplogo'//页面上作为文件上传队列的元素的ID
});

3、服务器端处理文件上传

 1     /// <summary>
2 /// 上传文件
3 /// </summary>
4 public class UploadApplogo : IHttpHandler
5 {
6 System.Drawing.Image image, image64, image48, image32, image16; //定义image类的对象
7 protected string imagePath;//图片路径
8 protected string imageType;//图片类型
9 protected string imageName;//图片名称
10 protected string fileName;//图片名称
11 //提供一个回调方法,用于确定Image对象在执行生成缩略图操作时何时提前取消执行
12 //如果此方法确定 GetThumbnailImage 方法应提前停止执行,则返回 true;否则返回 false
13 System.Drawing.Image.GetThumbnailImageAbort callb = null;
14
15 public void ProcessRequest(HttpContext context)
16 {
17 context.Response.ContentType = "text/plain";
18 HttpPostedFile UploadImage = context.Request.Files["FileData"];
19 //物理路径
20 string uploadpath = HttpContext.Current.Server.MapPath(context.Request["folder"] + "\\");
21
22 if (UploadImage != null)
23 {
24 //是否有目录,如没有就创建
25 if (!Directory.Exists(uploadpath))
26 {
27 Directory.CreateDirectory(uploadpath);
28 }
29 //客户端文件完全名称
30 string filename = UploadImage.FileName;
31 string extname = filename.Substring(filename.LastIndexOf(".") + 1);
32 //为不重复,设置文件名
33 fileName = Guid.NewGuid().ToString() + "." + extname;
34
35 //context.Response.Write("1");
36 context.Response.Write(fileName);
37 }
38 else
39 {
40 context.Response.Write("0");
41 }
42
43 string mPath;
44
45 imagePath = UploadImage.FileName;
46 //取得图片类型
47 imageType = imagePath.Substring(imagePath.LastIndexOf(".") + 1);
48 //取得图片名称
49 imageName = imagePath.Substring(imagePath.LastIndexOf("\\") + 1);
50 Stream imgStream = UploadImage.InputStream;//流文件,准备读取上载文件的内容
51 int imgLen = UploadImage.ContentLength;//上载文件大小
52
53 //建立虚拟路径
54 mPath = HttpContext.Current.Server.MapPath(context.Request["folder"]);
55 //保存到虚拟路径
56 UploadImage.SaveAs(mPath + "\\" + fileName);
57 ////显示原图
58 //imageSource.ImageUrl = "upFile/" + imageName;
59 //为上传的图片建立引用
60 image = System.Drawing.Image.FromFile(mPath + "\\" + fileName);
61
62 //生成缩略图
63 image64 = image.GetThumbnailImage(64, 64, callb, new System.IntPtr());
64 //把缩略图保存到指定的虚拟路径
65 image64.Save(HttpContext.Current.Server.MapPath(context.Request["folder"]) + "\\64_" + fileName);
66 //释放image64对象的资源
67 image64.Dispose();
68
69 //生成缩略图
70 image48 = image.GetThumbnailImage(48, 48, callb, new System.IntPtr());
71 image48.Save(HttpContext.Current.Server.MapPath(context.Request["folder"]) + "\\48_" + fileName);
72 image48.Dispose();
73
74 //生成缩略图
75 image32 = image.GetThumbnailImage(32, 32, callb, new System.IntPtr());
76 image32.Save(HttpContext.Current.Server.MapPath(context.Request["folder"]) + "\\32_" + fileName);
77 image32.Dispose();
78
79 //生成缩略图
80 image16 = image.GetThumbnailImage(16, 16, callb, new System.IntPtr());
81 image16.Save(HttpContext.Current.Server.MapPath(context.Request["folder"]) + "\\16_" + fileName);
82 image16.Dispose();
83
84 //释放image对象占用的资源
85 image.Dispose();
86 }
87
88 public bool IsReusable
89 {
90 get
91 {
92 return false;
93 }
94 }
95 }


3、效果如下


转载请注明本文地址:使用Uploadify实现上传图片生成缩略图例子,实时显示进度条
阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页