JQuery实现多文件上传

原创 2013年12月03日 19:44:38
     由于考试系统的需求,需要将听力文件或是图片上传到服务器中的数据库中,而文件又是很多.若是一个一个的上传,是很费事的.为了避免时间和精力的浪费,人性化.实现了多文件上传.
UploadifyJQuery的一个上传插件,实现的效果非常不错,带进度显示.
 
官方下载
官方文档
 
下面讲解

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

 

首先创建解决方案,添加jqueryls和一些资源文件(如图片和进度条显示等)
 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也是也可的)

页面中引入的jsjs函数如下


    <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数据库详细了解请看上篇博客。    实例代码下载

版权声明:本文为博主原创文章,未经博主允许不得转载。

新鲜出炉:基于HTML5的jquery文件上传插件(多文件选择、带进度条、完整可用)

一、前言     首先,为什么要写这个插件呢?分析下现在大家用的比较多的上传插件,大多是flash版本的,事实上我在前段时间一直用的是一个叫做uploadify的插件,官网http://www.up...

jquery异步文件上传插件ajaxFileUpload教程(支持多文件上传)

ajaxFileUpload是一款基于jquery的ajax上传方式的文件上传插件,它没有对上传控件作美化(使用原生态的上传控件),只是提供了异步上传的功能,但用它来作异步上传确实很简单和方便。下来我...

jquery-uploadfile的使用(多文件异步上传)

需求在页面端可以在页面不刷新情况下上传多个有大小限制的word文件,并返回文件保存的路径,同时可以删除误上传的文件。效果解决方案通过使用jquery中一款上传文件插件来实现。 下载地址: http:...

JQuery的Uploadify实现多文件上传

JQuery的Uploadify实现多文件上传,支持限制文件大小等,最基本的jsp+servlet方式。...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

JQuery 实现文件上传

简述: 实现前端使用jquery上传文件 后台用servlet处理文件上传以及保存 知识点: 1. 用到ajaxfileupload.js库 2. 后台servlet文件保存 ...
  • anialy
  • anialy
  • 2013年02月18日 15:11
  • 52731

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

基于jquery的多文件上传

1、文件上传前台设计 说到前台设计,还真的有些不知道怎么讲好,还是老样子,直接上图来的直接,在此也说明下:本人不擅长做PS,所以很多素材(图片)都是网上寻找的,这个上传程序可以上传各种文件,至于哪些...

jquery多文件上传,获取每个文件大小

var addImags =$(input的id).prop('files'); var fileSize=0; for(var i=0;i fileSize=$(addImags)[i].si...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JQuery实现多文件上传
举报原因:
原因补充:

(最多只允许输入30个字)