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实现进度条上传文件源码 源码说明 该程序采用了jquery框架,实现了小文件上传。 两个地方需要解释 第一,如何知道监听的这个文件就是上传的这个文件实现机制很简单,就是让asp.net产...
  • lovegonghui
  • lovegonghui
  • 2016年06月22日 11:39
  • 2437

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

 一、资源1)Uploadify v2.1.0,可以到这里下载:www.uploadify.com。2)JQuery EasyUI ,下载地址:http://jquery-easyui.wikidot...
  • IHandler
  • IHandler
  • 2010年10月26日 12:14
  • 11384

springMVC是实现前台带进度条文件上传续(二)

之前写过一遍基于springMVC是实现前台带进度条文件,但是该文章仅是代码层面的,没有做过多解释,今天看到一篇文章正好对上篇文章进行了较为详细的解释,文章原文如下:         文件上传应该大...
  • zmx729618
  • zmx729618
  • 2016年10月26日 11:45
  • 1177

总结:ajax多文件上传,带进度条,前端篇

前言: 之前写过一个文件上传的模块,但是是多个input上传的,而且使用的是jQuery.form打包上传的,这样子就觉得还是有点不太方便。 1.提交的时候需要将整...
  • qq_29238009
  • qq_29238009
  • 2017年08月28日 15:44
  • 565

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

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

ajax 上传 带 进度条 可多文件

项目中要用到一个  上传  在网上 找了找   没有  符合 我要求的  所以 自己写了 一个   ...
  • u010297848
  • u010297848
  • 2017年09月19日 15:36
  • 598

多文件上传带进度条的

多文件上传有时候要求带进度条显示,现在我就和大家分享一款这样的插件uploadify。         首先先到官网下载最新的zip压缩包http://www.uploadify.com。    ...
  • fengyhj
  • fengyhj
  • 2012年12月12日 14:33
  • 3056

Android实现文件上传(支持多文件)

大家在做android项目的时候,肯定会遇到文件上传(比如图片,音乐等),今天我把我刚做的一个图片上传功能分享一下, 基本的流程就是:定义一个HttpClient→定义post请求(HttpPost...
  • niulijieniu
  • niulijieniu
  • 2016年03月01日 15:17
  • 1270

Spring MVC带进度条的多文件上传

Spring MVC带进度条的多文件上传1、关于文件上传进度条的实现 在说Spring MVC文件上传尤其是带滚动条之前先用servlet做一个简单的文件上传并返回进度信息这样的功能。(1)需要两个包...
  • u010690828
  • u010690828
  • 2017年03月09日 15:40
  • 923

使用IHttpAsyncHandler实现带进度条的文件上传

asp.net中实现带进度显示的文件上传功能有很多选择,比如:Html5 XMLHttpRequest2、第三方控件、flash插件等等。本文介绍使用IHttpAsyncHandler对象实现进度显示...
  • taoerchun
  • taoerchun
  • 2016年04月05日 18:27
  • 1398
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ASP.NET带进度条多文件上传
举报原因:
原因补充:

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