由于考试系统的需求
,
需要将
听力文件或是图片
上传到服务器中的数据库中
,
而文件又是很多
.
若是一个一个的上传
,
是很费事的
.
为了避免时间和精力的浪费
,
人性化
.
实现了多文件上传
.
Uploadify 是 JQuery 的一个上传插件,实现的效果非常不错,带进度显示 .
官方下载
官方文档
下面讲解
1如何实现上传多文件.
2是解决如何实现大文件上传
首先创建解决方案 , 添加 jquery 的 ls 和一些资源文件 ( 如图片和进度条显示等 )
js函数
以上方式基本可以实现多文件的上传,大文件大小是在控制在 10M 以下 / 。基本页面如下
方案 1 在配置文件中设置响应时间。
这个方式基本可以解决 10M 以上的。当初自认为可以解决大文件的。但是发现并不是这样。当文件大于 30M 又出现了 HttpError IO 的错误。
经过几番的周折。在师傅和师姐的帮助下终于找打了解决的方案。还是在配置文件中设置,但是这次设置的是文件的大小限制。以为前台设置好文件的大小,就不用在配置文件中设置,但是事实并不是这样的。还是得需要配置。
添加如下配置
成功提示如下
Uploadify 是 JQuery 的一个上传插件,实现的效果非常不错,带进度显示 .
官方下载
官方文档
下面讲解
1如何实现上传多文件.
2是解决如何实现大文件上传
首先创建解决方案 , 添加 jquery 的 ls 和一些资源文件 ( 如图片和进度条显示等 )
jquery-1.3.2.min.jsjquery.uploadify.v2.1.0.jsjquery.uploadify.v2.1.0.min.jsswfobject.jsuploadify.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>
- <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解决大文件上传
方案 1 在配置文件中设置响应时间。
- <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 的错误。
经过几番的周折。在师傅和师姐的帮助下终于找打了解决的方案。还是在配置文件中设置,但是这次设置的是文件的大小限制。以为前台设置好文件的大小,就不用在配置文件中设置,但是事实并不是这样的。还是得需要配置。
添加如下配置
- <span style="font-size:18px;"><system.webServer>
- <security>
- <requestFiltering>
- <requestLimits maxAllowedContentLength="999999999"></requestLimits>
- </requestFiltering>
- </security>
- </system.webServer></span>
成功提示如下