原创

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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://david.blog.csdn.net/article/details/53420791

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;
            }
        }
    }

5.效果
这里写图片描述

文章最后发布于: 2016-12-01 14:07:17
展开阅读全文
0 个人打赏
私信求帮助

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

©️2019 CSDN 皮肤主题: 鲸 设计师: meimeiellie

分享到微信朋友圈

×

扫一扫,手机浏览