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

转载 2012年06月06日 21:10:38

一、资源

1)Uploadify v2.1.0,可以到这里下载:www.uploadify.com。

2)JQuery EasyUI ,下载地址:http://jquery-easyui.wikidot.com/download

 

二、预览

1)初始界面 

 

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

 

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

 

 三、代码

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

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

HTML:

[xhtml:nogutter] view plaincopy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5.     <title>多文件上传 - 可设置多文件还是单文件上传,以及上传文件的大小</title>  
  6.     <!--JQuery-->  
  7.     <mce:script type="text/javascript" src="scripts/jquery-1.4.2.min.js" mce_src="scripts/jquery-1.4.2.min.js"></mce:script>  
  8.     <!--JQuery EasyUI-->  
  9.     <link href="css/easyui/themes/default/easyui.css" mce_href="css/easyui/themes/default/easyui.css" rel="stylesheet" type="text/css" />  
  10.     <link href="css/easyui/themes/icon.css" mce_href="css/easyui/themes/icon.css" rel="stylesheet" type="text/css" />  
  11.     <mce:script type="text/javascript" src="scripts/jquery.easyui.min.js" mce_src="scripts/jquery.easyui.min.js"></mce:script>  
  12.     <!--MultiUpload-->  
  13.     <link href="css/default.css" mce_href="css/default.css" rel="stylesheet" type="text/css" />  
  14.     <link href="css/uploadify.css" mce_href="css/uploadify.css" rel="stylesheet" type="text/css" />  
  15.     <mce:script type="text/javascript" src="scripts/swfobject.js" mce_src="scripts/swfobject.js"></mce:script>  
  16.     <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>  
  17.     <mce:script type="text/javascript"><!--  
  18.         $(document).ready(function () {  
  19.             $("#uploadify").uploadify({  
  20.                 'uploader': 'Flash/uploadify.swf',  
  21.                 'script': 'UploadHandler.ashx',  
  22.                 'cancelImg': 'Images/cancel.png',  
  23.                 'folder': 'Uploads',  
  24.                 'queueID': 'fileQueue',  
  25.                 //'fileDesc': '*.rar;*.jpg;*.gif',  
  26.                 //'fileExt': '*.rar;*.jpg;*.gif',  
  27.                 'sizeLimit': '2097152', //2M  
  28.                 'auto': false,  
  29.                 'multi': true,  
  30.                 'onError': function (a, b, c, d) {  
  31.                     if (d.status == 404)  
  32.                         alert('Could not find upload script.');  
  33.                     else if (d.type === "HTTP")  
  34.                         alert('error ' + d.type + ": " + d.status);  
  35.                     else if (d.type === "File Size")  
  36.                         alert(c.name + ' ' + d.type + ' Limit: ' + Math.round(d.sizeLimit / 1024) + 'KB');  
  37.                     else  
  38.                         alert('error ' + d.type + ": " + d.info);  
  39.                 }  
  40.             });  
  41.         });  
  42. // --></mce:script>  
  43. </head>  
  44. <body>  
  45.     <div class="easyui-tabs" style="width: 400px; height: 300px;padding-bottom:5px">  
  46.         <div title="上传文件列表" id="fileQueue" style="padding: 10px;" mce_style="padding: 10px;">  
  47.               
  48.         </div>  
  49.         <!--<div title="已上传文件" id="fileUploaded" closable="false" style="padding: 10px;" mce_style="padding: 10px;">  
  50.               
  51.         </div>-->  
  52.     </div>  
  53.     <input type="file" name="uploadify" id="uploadify" />  
  54.     <p>  
  55.         <a href="javascript:$('#uploadify').uploadifyUpload()" mce_href="javascript:$('#uploadify').uploadifyUpload()">全部上传</a><a href="javascript:$('#uploadify').uploadifyClearQueue()" mce_href="javascript:$('#uploadify').uploadifyClearQueue()">  
  56.             全部取消</a>  
  57.     </p>  
  58. </body>  
  59. </html>  
 

 

UploadHandler.ashx文件代码:

[c-sharp:nogutter] view plaincopy
  1. <%@ WebHandler Language="C#" Class="UploadHandler" %>  
  2. using System;  
  3. using System.IO;   
  4. using System.Net;  
  5. using System.Web;   
  6. public class UploadHandler : IHttpHandler  
  7. {  
  8.     public void ProcessRequest(HttpContext  context)   
  9.     {  
  10.         context.Response.ContentType = "text/plain";   
  11.         context.Response.Charset = "utf-8";  
  12.           
  13.         //获取上传文件队列  
  14.         HttpPostedFile oFile = context.Request.Files["Filedata"];  
  15.         if (oFile != null)  
  16.         {  
  17.             string topDir = context.Request["folder"];  
  18.             //创建顶级目录  
  19.             if (!Directory.Exists(HttpContext.Current.Server.MapPath(topDir)))  
  20.             {  
  21.                 Directory.CreateDirectory(HttpContext.Current.Server.MapPath(topDir));  
  22.             }   
  23.               
  24.             //当天上传的文件放到已当天日期命名的文件夹中  
  25.             string dateFolder = HttpContext.Current.Server.MapPath(topDir) + "//" + DateTime.Now.Date.ToString("yyyy-MM-dd");  
  26.             if (!Directory.Exists(dateFolder))  
  27.             {  
  28.                 Directory.CreateDirectory(dateFolder);  
  29.             }  
  30.             oFile.SaveAs(dateFolder + "//" + oFile.FileName);  
  31.             context.Response.Write("1");  
  32.               
  33.         }   
  34.         else   
  35.         {   
  36.             context.Response.Write("0");   
  37.         }  
  38.     }  
  39.     public bool IsReusable  
  40.     {   
  41.         get  { return false; }  
  42.     }   
  43. }  
 

 

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

相关文章推荐

asp.net文件上传带进度条

  • 2010年05月28日 16:09
  • 7KB
  • 下载

asp.net实现文件上传带进度条(多种风格)

文件上传 带进度条 多种风格 非常漂亮!         友好的提示 以及上传验证!       ...

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

  • 2014年11月13日 09:03
  • 96KB
  • 下载

asp.net单文件带进度条上传

asp.net单文件带进度条上传,不属于任务控件,也不是flash类型的上传,完全是asp.net、js、css实现上传。源码为开发测试版,需要使用的亲需要注意修改配置文件。...

NeatUpload Asp.net文件上传带进度条

  • 2011年10月10日 13:32
  • 580KB
  • 下载

Asp.Net上传组件RadUpLoad(带进度条时间显示)

在我的企业管理系统开发的过程中,遇到的最大问题就是大文件的上传了。在asp或者php中要想上传大文件就需借助于组件(这会受到虚拟主机的限制)。但是在asp.net中大文件上传似乎要简单了很多。下面提供...

文件上传显示进度条(asp.net)

  • 2008年02月18日 15:01
  • 18KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ASP.NET带进度条多文件上传
举报原因:
原因补充:

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