代码改变世界

jquery uploadify上传插件用法心得

2013-06-09 17:20  sql_manage  阅读(282)  评论(0)  编辑  收藏  举报

uploadify是一个非常好的jquery 文件上传插件，最近在搞一个多文件且要显示进度条的文件上传功能就用到了它，所以记下来以便今后的查询。

首先去官方下载最新版：

http://www.uploadify.com

然后在工程项目中新一个张aspx页面：uploadFile.aspx

其代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="uploadFile.aspx.cs" Inherits="ProjectTest.uploadFile" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link href="JS/Upload/uploadify.css" rel="stylesheet" />
    <script src="JS/jquery-1.8.1.min.js"></script>
    <script src="JS/Upload/jquery.uploadify.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#uploadify").uploadify({
                'swf': 'JS/Upload/uploadify.swf',
                'uploader': 'UploadHandler.ashx',
                'fileSizeLimit': 0,
                'successTimeout': 600,
                 'auto': false,
                'multi': true
            });
        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
    <div id="fileQueue"></div>
    <input type="file" name="uploadify" id="uploadify" />
    <p>
      <a href="javascript:$('#uploadify').uploadify('upload','*')">Upload Files</a>
      <a href="javascript:$('#uploadify').uploadify('upload', '*')">Upload the Files</a>
    </p>

    </div>
    </form>
</body>
</html>

　　然后是新一张文件上传的一般页面：UploadHandler.ashx

其代码如下：

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;

namespace ProjectTest
{
    /// <summary>
    /// UploadHandler 的摘要说明
    /// </summary>
    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 K = file.FileName;
            string uploadPath = AppDomain.CurrentDomain.BaseDirectory + "\\UploadFile\\";
            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;
            }
        }
    }
}

　　这里要注意几个地方：

     1、当上传大文件时，.net中在开发的时候默认是4M的，如果大于这个数的话会报500错误。解决方法如下：

         在web.config中添加如下内容

        <system.web>
               <httpRuntime maxRequestLength="10485760" executionTimeout="3600" />
       </system.web>

     2、如果部署到了IIS7的话，IIS7默认的大小为3000000.修改方法如下：

          找到网站双击“请求筛选”——右边找到“编辑功能设置”——将“允许的最大内容长度”改成你想要的就行了。