JQuery实现多文件上传

来源：互联网发布：一键部署php环境编辑：程序博客网时间：2024/06/08 06:34

由于考试系统的需求,需要将听力文件或是图片上传到服务器中的数据库中,而文件又是很多.若是一个一个的上传,是很费事的.为了避免时间和精力的浪费,人性化.实现了多文件上传.
Uploadify是JQuery的一个上传插件，实现的效果非常不错，带进度显示.

官方下载
官方文档

下面讲解

1如何实现上传多文件.
2是解决如何实现大文件上传

首先创建解决方案,添加jquery的ls和一些资源文件(如图片和进度条显示等)

jquery-1.3.2.min.js
jquery.uploadify.v2.1.0.js
jquery.uploadify.v2.1.0.min.js
swfobject.js
uploadify.css

1 页面的基本代码如下

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

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

    <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>    <script src="js/jquery.uploadify.v2.1.0.js" type="text/javascript"></script>    <script src="js/jquery.uploadify.v2.1.0.min.js" type="text/javascript"></script>    <script src="js/swfobject.js" type="text/javascript"></script>    <link href="css/uploadify.css" rel="stylesheet" type="text/css" />        </script>

js函数

<script type="text/javascript">        $(document).ready(function () {             $("#uploadify").uploadify({                'uploader': 'image/uploadify.swf',  //uploadify.swf文件的相对路径，该swf文件是一个带有文字BROWSE的按钮，点击后淡出打开文件对话框                           'script': 'Handler1.ashx',//    script ：  后台处理程序的相对路径                'cancelImg': 'image/cancel.png',                '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" +                //  "文件名：" + fileObj.name + "\r\n" +                //  "文件大小：" + fileObj.size + "\r\n" +                //  "创建时间：" + fileObj.creationDate + "\r\n" +                //  "最后修改时间：" + fileObj.modificationDate + "\r\n" +                //  "文件类型：" + fileObj.type);                 //    }                'onQueueComplete': function (queueData) {                    alert("文件上传成功！");                                      return;                }             });        });

页面中的控件代码

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

函数主要参数

示例:

$(document).ready(function() {        $('#fileInput1').fileUpload({                'uploader': 'uploader.swf',//不多讲了                'script': '/AjaxByJQuery/file.do',//处理Action                'cancelImg': 'cancel.png',                        '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 System.Collections.Generic;using System.Linq;using System.IO;using System.Net;using System.Web;using System.Web.Services;namespace fupload{    /// <summary>    /// Handler1 的摘要说明    /// </summary>    public class Handler1 : IHttpHandler    {         public void ProcessRequest(HttpContext context)        {            context.Response.ContentType = "text/plain";             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("上传成功");            }             else            {                context.Response.Write("0");            }         }         public bool IsReusable        {            get            {                return false;            }        }    }}

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

2解决大文件上传

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

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

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

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

添加如下配置

<system.webServer>    <security>    <requestFiltering>      <requestLimits maxAllowedContentLength="999999999"></requestLimits>    </requestFiltering>         </security>  </system.webServer>

成功提示如下

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

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