JQuery实现多文件上传

1 页面的基本代码如下

我这里用的是 aspx 页面 (html 也是也可的 )

页面中引入的js和js函数如下

    <script src="js/jquery-1.3." type="text/javascript"></script>
    <script src="js/.v2.1." type="text/javascript"></script>
    <script src="js/.v2.1." type="text/javascript"></script>
    <script src="js/" type="text/javascript"></script>
    <link href="css/" rel="stylesheet" type="text/css" />
    
    </script>

js函数

<script type="text/javascript">
        $(document).ready(function () {
 
            $("#uploadify").uploadify({
                'uploader': 'image/',  //文件的相对路径，该swf文件是一个带有文字BROWSE的按钮，点击后淡出打开文件对话框              
             'script': '',//    script ：  后台处理程序的相对路径
                'cancelImg': 'image/',
                'buttenText': '请选择文件',//浏览按钮的文本，默认值：BROWSE。
                'sizeLimit':999999999,//文件大小显示
                'floder': 'Uploader',//上传文件存放的目录
              'queueID': 'fileQueue',//文件队列的ID，该ID与存放文件队列的div的ID一致
                'queueSizeLimit': 120,//上传文件个数限制
                'progressData': 'speed',//上传速度显示
                'auto': false,//是否自动上传
                'multi': true,//是否多文件上传
                //'onSelect': function (e, queueId, fileObj) {
                //    alert("唯一标识:" + queueId + "\r\n" +
                //  "文件名：" +  + "\r\n" +
                //  "文件大小：" +  + "\r\n" +
                //  "创建时间：" +  + "\r\n" +
                //  "最后修改时间：" +  + "\r\n" +
                //  "文件类型：" + );
 
                //    }
                'onQueueComplete': function (queueData) {
                    alert("文件上传成功！");                  
                    return;
                }
 
            });
        });

页面中的控件代码

<body>
    <form  runat="server">
    <div >       
    </div>
        <div>
            <p>
                <input type="file" name="uploadify" />
                <input  type="button" value="上传" οnclick="javascript: $('#uploadify').uploadifyUpload()" />
                <input  type="button" value="取消" οnclick="javascript:$('#uploadify').uploadifyClearQueue()" />
            </p>
        </div>
    </form>
</body>

函数主要参数

示例:

$(document).ready(function() {
        $('#fileInput1').fileUpload({
                'uploader': '',//不多讲了
                'script': '/AjaxByJQuery/',//处理Action
                'cancelImg': '',        
                'folder': '',//服务端默认保存路径
                'scriptData':{'methed':'uploadFile','arg1','value1'},
                //向后台传递参数,methed,arg1为参数名,uploadFile,value1为对应的参数值,服务端通过request["arg1"]
                'buttonText':'UpLoadFile',//按钮显示文字,不支持中文,解决方案见下
                //'buttonImg':'图片路径',//通过设置背景图片解决中文问题,就是把背景图做成按钮的样子
                'multi':'true',//多文件上传开关
                 'fileExt':'*.xls;*.csv',//文件过滤器
                'fileDesc':'.xls',//文件过滤器 详解见文档
           'onComplete' : function(event,queueID,file,serverData,data){ 
                        //serverData为服务器端返回的字符串值
                        alert(serverData);
                 }
        });
});

后台一般处理文件

using System;
using ;
using ;
using ;
using ;
using ;
using ;
namespace fupload
{
    /// <summary>
    /// Handler1 的摘要说明
    /// </summary>
    public class Handler1 : IHttpHandler
    {
 
        public void ProcessRequest(HttpContext context)
        {
             = "text/plain";
 
            HttpPostedFile file = ["Filedata"];//对客户端文件的访问
 
            string uploadPath = (@["folder"])+"\\";//服务器端文件保存路径
 
            if (file != null)
            {
                if (!(uploadPath))
                {
                    (uploadPath);//创建服务端文件夹
                }
 
                (uploadPath + );//保存文件
                ("上传成功");
            }
 
            else
            {
                ("0");
            }
 
        }
 
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

以上方式基本可以实现多文件的上传，大文件大小是在控制在 10M 以下 / 。基本页面如下

2解决大文件上传

当文件大于 10M 的时候上传会报错， 1 是超过文件长度。
方案 1 在配置文件中设置响应时间。

<>
      <compilation debug="true" targetFramework="4.0" />
    <httpRuntime maxRequestLength="20480000" executionTimeout ="7200"/>
    </>

这个方式基本可以解决 10M 以上的。当初自认为可以解决大文件的。但是发现并不是这样。当文件大于 30M 又出现了 HttpError IO 的错误。

经过几番的周折。在师傅和师姐的帮助下终于找打了解决的方案。还是在配置文件中设置，但是这次设置的是文件的大小限制。以为前台设置好文件的大小，就不用在配置文件中设置，但是事实并不是这样的。还是得需要配置。

添加如下配置

<>
    <security>
    <requestFiltering>
      <requestLimits maxAllowedContentLength="999999999"></requestLimits>
    </requestFiltering>     
    </security>
  </>

成功提示如下

经过测试 100M 以上的文件也是没问题的。

以上代码只是一个很小的实例代码，当然文件当然不能保存到服务端的目录下了。需要上传到专门的非结构化数据库中（如 Mongodb ），Mongodb数据库详细了解请看上篇博客。实例代码下载。

秒客网