JQuery上传插件Uploadify的简单使用

最新推荐文章于 2025-07-12 14:09:35 发布

chenguang79

最新推荐文章于 2025-07-12 14:09:35 发布

阅读量1.3w

点赞数 2

CC 4.0 BY-SA版权

分类专栏： javascript asp.net

本文链接：https://blog.youkuaiyun.com/chenguang79/article/details/50765098

asp.net 同时被 2 个专栏收录

109 篇文章

订阅专栏

javascript

53 篇文章

订阅专栏

本文介绍如何利用Uploadify插件实现Web页面上的无刷新文件上传功能，并提供了一个简单的示例程序，包括前端HTML页面及后端处理逻辑。

摘要生成于 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文件，代码如下：

<!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

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,是不是很简单