JQuery实现多文件上传

最新推荐文章于 2024-04-30 17:35:01 发布

jcxch

最新推荐文章于 2024-04-30 17:35:01 发布

阅读量1.2k

点赞数

分类专栏： js+框架

js+框架专栏收录该内容

5 篇文章 0 订阅

订阅专栏

由于考试系统的需求 , 需要将 听力文件或是图片 上传到服务器中的数据库中 , 而文件又是很多 . 若是一个一个的上传 , 是很费事的 . 为了避免时间和精力的浪费 , 人性化 . 实现了多文件上传 .
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函数如下

[html] view plain copy print ?

<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函数

[javascript] view plain copy print ?

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

页面中的控件代码

[html] view plain copy print ?

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

函数主要参数

示例:

[javascript] view plain copy print ?

$(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);
}
});
});

后台一般处理文件

[csharp] view plain copy print ?

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 在配置文件中设置响应时间。

[html] view plain copy print ?

<span style="font-size:18px;"><system.web>
<compilation debug="true" targetFramework="4.0" />
<httpRuntime maxRequestLength="20480000" executionTimeout ="7200"/>
</system.web></span>

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

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

添加如下配置

[html] view plain copy print ?

<span style="font-size:18px;"><system.webServer>
<security>
<requestFiltering>
<requestLimits maxAllowedContentLength="999999999"></requestLimits>
</requestFiltering>
</security>
</system.webServer></span>

成功提示如下

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

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

jcxch

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQuery实现多文件上传

由于考试系统的需求,需要将听力文件或是图片上传到服务器中的数据库中,而文件又是很多.若是一个一个的上传,是很费事的.为了避免时间和精力的浪费,人性化.实现了多文件上传.Uploadify是JQuery的一个上传插件，实现的效果非常不错，带进度显示. 官方下载官方文档下面讲解1如何实现上传多文件.2是解决如何实现大文件上传首先创建解决方案,添加jq
复制链接

扫一扫