[JQ权威指南]jQuery上传插件Uploadify使用详解

最新推荐文章于 2025-04-27 09:50:06 发布

厦门德仔

最新推荐文章于 2025-04-27 09:50:06 发布

阅读量603

点赞数

CC 4.0 BY-SA版权

分类专栏： # JQuery 文章标签： upload

本文链接：https://blog.youkuaiyun.com/david_520042/article/details/53420791

JQuery 专栏收录该内容

63 篇文章

订阅专栏

本文介绍如何使用jQuery Uploadify插件实现文件上传功能。通过创建Web项目并集成jQuery Uploadify，实现了文件选择、上传和取消操作。同时展示了如何配置UploadHandler处理文件上传请求。

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

1 创建Web项目，命名为JQueryUploadDemo，从官网上下载最新的版本解压后添加到项目中。

2 在项目中添加UploadHandler.ashx文件用来处理文件的上传。

3.HTML

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JQueryUploadDemo._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>Uploadify</title>
    <link href="JS/jquery.uploadify-v2.1.0/example/css/default.css" rel="stylesheet" type="text/css" />
    <link href="JS/jquery.uploadify-v2.1.0/uploadify.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="JS/jquery.uploadify-v2.1.0/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="JS/jquery.uploadify-v2.1.0/swfobject.js"></script>
    <script type="text/javascript" src="JS/jquery.uploadify-v2.1.0/jquery.uploadify.v2.1.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function()
        {
            $("#uploadify").uploadify({
                'uploader': 'JS/jquery.uploadify-v2.1.0/uploadify.swf',
                'script': 'UploadHandler.ashx',
                'cancelImg': 'JS/jquery.uploadify-v2.1.0/cancel.png',
                'folder': 'UploadFile',
                'queueID': 'fileQueue',
                'auto': false,
                'multi': true,

            });
        });  
    </script>

</head>
<body>
    <div id="fileQueue"></div>
    <input type="file" name="uploadify" id="uploadify" />
    <p>
        <a href="javascript:$('#uploadify').uploadifyUpload()">上传</a>| 
        <a href="javascript:$('#uploadify').uploadifyClearQueue()">取消上传</a>
    </p>
</body>
</html>

UploadHandler.ashx

    /// <summary>
    /// $codebehindclassname$ 的摘要说明
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

    public class UploadHandler : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";   
            context.Response.Charset = "utf-8";   

            HttpPostedFile file = context.Request.Files["Filedata"];   
            string  uploadPath = 
                HttpContext.Current.Server.MapPath(@context.Request["folder"])+"\\";  

            if (file != null)  
            {  
               if (!Directory.Exists(uploadPath))  
               {  
                   Directory.CreateDirectory(uploadPath);  
               }   
               file.SaveAs(uploadPath + file.FileName);  
                //下面这句代码缺少的话，上传成功后上传队列的显示不会自动消失
               context.Response.Write("1");  
            }   
            else  
            {   
                context.Response.Write("0");   
            }  
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }