JQuery上传插件Uploadify的使用

最新推荐文章于 2025-05-23 14:41:09 发布

aaa333qwe

最新推荐文章于 2025-05-23 14:41:09 发布

阅读量1.4k

点赞数

分类专栏： jQuery学习目录

jQuery学习目录专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何利用Uploadify插件实现文件无刷新上传功能。文中提供了详细配置步骤及示例代码，并演示了如何设置文件类型、大小限制等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在开发 web程序的时候，上传附件或是照片这是常有的事件，以前一直在使用swfupload，后来发现了jQuery的Uploadify感觉不错，就试了一下，这里做一个记录。以备使用。

Uploadify的下载地址：http://www.uploadify.com/download/

这里注意一点，因为这种无刷新上传全是通过flash实现的，所以我们还要去下载一个swfobject.js

swfobject.js的下载地址：https://github.com/swfobject/swfobject

当然了，还要它的基础类jquery.min.js文件，这里我用的是jquery-1.7.1.min.js这个网上很容易找，而且我想大家手里也都有就不多说了。

Uploadify的官方使用说明：http://www.uploadify.com/documentation/ 这个英文不好也能看明白，他都给出了例子，还是很不错的。

中文的说明：http://wenku.baidu.com/link?url=ZMRK05I8PO8plcCOejmrvFOb2au-TItby9oLqnO2olc-A9GZuLrPtJ70EOp4pCIj8XBHnGk6-8nhYAhWlcakyUxtKhzfMp1l0WlHpk6xz9O

下面我们来看一下程序的例子：

1，先下载Uploadify的压缩包，然后解压，把里面的文件解压到你的项目的js文件夹中。其中有用的文件就是四个。

jquery.uploadify.js（jquery.uploadify.min.js），uploadify.css，uploadify.swf，uploadify-cancel.png

2，将swfobject.js，jquery-1.7.1.min.js放到js文件夹中

3，新建Default.html文件，代码如下：

[html]view plaincopy 
   
 <!DOCTYPE html>  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
     <title></title>  
     <link href="js/uploadify.css" rel="stylesheet" />  
     <script src="js/jquery-1.7.1.min.js"></script>  
     <script src="js/swfobject.js"></script>  
     <script src="js/jquery.uploadify.min.js"></script>  
     <script type="text/javascript">  
         $(function () {  
             $("#file_upload").uploadify({  
                 //开启调试    
                 'debug': false,  
                 //是否自动上传    
                 'auto': false,  
                 'buttonText': '选择照片',  
                 //flash    
                 'swf': "js/uploadify.swf",  
                 'queueSizeLimit': 5,  
                 //文件选择后的容器ID    
                 'queueID': 'uploadfileQueue',  
                 //后台运行上传的程序  
                 'uploader': 'upload.ashx',  
                 'width': '75',  
                 'height': '24',  
                 //是否支持多文件上传，这里为true，你在选择文件的时候，就可以选择多个文件  
                 'multi': true,  
                 '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(file.name);  
                     $("#mypic").attr("src", data);  
                 },  
                 //多文件上传，服务器返回相应的信息  
                 'onQueueComplete': function (queueData) {  
                     alert(queueData.uploadsSuccessful);  
                 }  
             });  
         });  
   
         //开始上传  
         function doUpload() {  
             $('#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">    
                 <input type="button" value="上传" onclick="doUpload()" />  
                 <input type="button" value="取消" onclick="closeLoad()" />   
             </td>    
         </tr>    
         <tr>  
             <td>  
                 <img id="mypic" width="100" height="120" />  
             </td>  
         </tr>  
     </table>    
 </body>  
 </html>  

4，编写后台代码：upload.ashx

[csharp]view plaincopy 
   
 using System;  
 using System.Collections.Generic;  
 using System.IO;  
 using System.Linq;  
 using System.Web;  
   
 namespace JQueryUploadDemo  
 {  
     /// <summary>  
     /// upload 的摘要说明  
     /// </summary>  
     public class upload : IHttpHandler  
     {  
   
         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("\\UploadFile\\");  
             string filename = DateTime.Now.ToString("yyyyMMddhhmmssffff") + ".jpg";  
             if (file != null)  
             {  
                 if (!Directory.Exists(uploadPath))  
                 {  
                     Directory.CreateDirectory(uploadPath);  
                 }  
                   
                 file.SaveAs(uploadPath + filename);  
                 //生成缩略图    
                 //MakeThumbnail(uploadPath + file.FileName, uploadPath + "\\s\\" + file.FileName, 80, 80);  
             }  
   
             context.Response.Clear();  
             context.Response.Write("/UploadFile/" + filename);  
             context.Response.End();  
         }  
   
         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;  
             }  
         }  
     }  
 }  

OK,是不是很简单