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

标签： uploadify 上传 图片 | 发表时间：2012-04-26 14:18 | 作者：XuebinDing
出处：http://www.cnblogs.com/

不了解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 上传 图片] 推荐：

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

- - 博客园_首页
不了解Uploadify的，先看看前一篇详细说明. Uploadify简单说来，是基于Jquery的一款文件上传插件. 支持单文件或多文件上传，可控制并发上传的文件数. 在服务器端支持各种语言与之配合使用，诸如PHP,.NET,Java……. 通过参数可配置上传文件类型及大小限制. 通过参数可配置是否选择文件后自动上传.

基于uploadify上传和 servlet 的下载

- - CSDN博客推荐文章
由于工作需要 暂时快速的选定了uploadify作为文件上传插件. 至于下载就匆忙的用servlet来实现. 首先到uploadify官网下载需要的Js文件. 然后需要自己手写一个Js 来调用 uploadify.js 重点只说上传 其他辅助功能方法不细说.                         'buttonText' : '添加附件',.

Springmvc+uploadify实现文件上传

- - ITeye博客
          Springmvc+uploadify实现文件上传.    网上看了很多关于文件上传的帖子，众口不一，感觉有点乱，最近正好公司的项目里用到JQuery的uploadify控件做文件上传，所以整理下头绪，搞篇文档出来，供亲们分享.    Uploadify控件的主要优势是可以实现批量文件上传，并且提供了onSelect（选中文件）、onUploadSuccess（上传成功回调函数）等多个事件监听函数，可以操控上传的整个流程.

jQuery无刷新上传之uploadify简单试用

- - 博客园_首页
      先简单的侃两句：貌似已经有两个月的时间没有写过文章了，不过仍会像以前那样每天至少有一至两个小时是泡在园子里看各位大神的文章. 前些天在研究“ajax无刷新上传”方面的一些插件，用SWFUpload实现了无刷新上传的功能，不过个人觉得不是很完美.      昨天在网上找到了一个叫做uploadify的jquery上传插件，看到园子里有几篇文章也是介绍这个插件的，心想何不用这个试试.

java版-JQuery上传插件Uploadify使用实例

- - Web前端 - ITeye博客
'folder' : 'uploads',//您想将文件保存到的路径. 'queueID' : 'fileQueue',//与下面的id对应. 'fileDesc' : 'rar文件或zip文件',. 'fileExt' : '*.rar;*.zip', //控制可上传文件的扩展名，启用本项时需同时声明fileDesc.

html5 图片上传预览

- - 博客园_首页
  前段时间做html5项目的时候，做了一个图片上传功能，并且可以直接预览，单纯的js就可以实现，很方便的.   这样做比调用后台方便多了，但是只支持html5的，html5以前是不支持的. 未来html5是主流，所以这种方法非常方便的.   几段js代码就可以来实现，而且解析速度也很快. 这种方法值得推广，以后前端也不要为这个烦恼了，还要后台用程序加载出来，那样太浪费时间了.

上传图片之上传前预览图片

- - CSDN博客推荐文章
上传图片对图片进行一下预览，可以了解图片上传后大概会是什么样子，此功能用js实现，然后在fileupload控件的change事件中调用，这样当用fileupload选择完图片以后，图片就会自动显示出来了. fileupload控件及用来预览图片的image：. 功能很简单，代码也很易懂，相信不用我多废话大家也能看懂吧.

Twitter支持上传图片功能

- linsen - 月光博客
　　Twitter在官方微博中称，已经全面推出新版Twitter页面，旧版Twitter页面下线，用户将无法再使用旧版页面. 新版中，用户可以使用图片上传功能，上传用户本地的图片到Twitter里. 　　用户可以在他们的个人状态更新框的最左侧找到一个相机图标，用户可以点击该图标进行图片上传. 用户可以从自己的桌面中上传不超过3MB的图片，然后相关图片信息将会嵌入到用户的Twitter状态中.

JAVA上传图片的缩放处理

- - CSDN博客推荐文章
  图片上传到服务器后，会根据情况将图片缩小成一个图标，我们可以利用java强大的图形处理功能，对上传的图片进行缩放处理. 　　下面的程序使用jdk1.4中最新的ImageIO对图片进行读写. 使用AffineTransform对图片进行缩放. 　　* @param fromdir 图片的原始目录.

上传图片 预览功能

- - ITeye博客
使用HMTL5 FileReader 处理上传图片的预览，以下代码已经在IE7，8,9,firefox 21.0,chrome浏览器下测试通过. 如想了解更多HTML5. 请参看： http://hushc.sinaapp.com//post/27. 已有 0 人发表留言，猛击->> 这里<<-参与讨论.