ASP.NET带进度条多文件上传

一、资源

1）Uploadify v2.1.0，可以到这里下载：www.uploadify.com。

2）JQuery EasyUI ，下载地址：http://jquery-easyui.wikidot.com/download

二、预览

1）初始界面

ASP.NET带进度条多文件上传

2）点击【BROWSE】选择多文件

ASP.NET带进度条多文件上传

3）选择的文件列表，点击【全部上传】开始上传文件队列

ASP.NET带进度条多文件上传

三、代码

1）解压jquery.uploadify-v2.1.0.zip，复制example/index.php的代码，对应粘贴到你的页面（HTML或ASPX），注意拷贝相应的CSS、JS和SWF文件到你的项目对应目录

2）解压 JQuery EasyUI.zip，拷贝相应的CSS、JS文件到你的项目对应目录，并在你的页面中的<title></title>标签中添加引用

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>多文件上传 - 可设置多文件还是单文件上传，以及上传文件的大小</title>  <mce:script type="text/javascript" src="scripts/jquery-1.4.2.min.js" mce_src="scripts/jquery-1.4.2.min.js"></mce:script>  <link href="css/easyui/themes/default/easyui.css" mce_href="css/easyui/themes/default/easyui.css" rel="stylesheet" type="text/css" /> <link href="css/easyui/themes/icon.css" mce_href="css/easyui/themes/icon.css" rel="stylesheet" type="text/css" /> <mce:script type="text/javascript" src="scripts/jquery.easyui.min.js" mce_src="scripts/jquery.easyui.min.js"></mce:script>  <link href="css/default.css" mce_href="css/default.css" rel="stylesheet" type="text/css" /> <link href="css/uploadify.css" mce_href="css/uploadify.css" rel="stylesheet" type="text/css" /> <mce:script type="text/javascript" src="scripts/swfobject.js" mce_src="scripts/swfobject.js"></mce:script> <mce:script type="text/javascript" src="scripts/jquery.uploadify.v2.1.0.min.js" mce_src="scripts/jquery.uploadify.v2.1.0.min.js"></mce:script> <mce:script type="text/javascript"></mce:script></head><body> <div class="easyui-tabs" style="width: 400px; height: 300px;padding-bottom:5px"> <div title="上传文件列表" id="fileQueue" style="padding: 10px;" mce_style="padding: 10px;"> </div>  </div> <input type="file" name="uploadify" id="uploadify" /> <p> <a href="javascript:$('#uploadify').uploadifyUpload()" mce_href="javascript:$('#uploadify').uploadifyUpload()">全部上传</a>| <a href="javascript:$('#uploadify').uploadifyClearQueue()" mce_href="javascript:$('#uploadify').uploadifyClearQueue()"> 全部取消</a> </p></body></html>

UploadHandler.ashx文件代码：

<%@ WebHandler Language="C#" Class="UploadHandler" %>using System;using System.IO; using System.Net;using System.Web; public class UploadHandler : IHttpHandler{ public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; context.Response.Charset = "utf-8"; //获取上传文件队列 HttpPostedFile oFile = context.Request.Files["Filedata"]; if (oFile != null) { string topDir = context.Request["folder"]; //创建*目录 if (!Directory.Exists(HttpContext.Current.Server.MapPath(topDir))) { Directory.CreateDirectory(HttpContext.Current.Server.MapPath(topDir)); } //当天上传的文件放到已当天日期命名的文件夹中 string dateFolder = HttpContext.Current.Server.MapPath(topDir) + "//" + DateTime.Now.Date.ToString("yyyy-MM-dd"); if (!Directory.Exists(dateFolder)) { Directory.CreateDirectory(dateFolder); } oFile.SaveAs(dateFolder + "//" + oFile.FileName); context.Response.Write("1"); } else { context.Response.Write("0"); } } public bool IsReusable { get { return false; } } }

下一篇谈一下如何让上传的文件跟特定的数据库信息关联。

秒客网

ASP.NET带进度条多文件上传

相关文章