ASP.NET2.0: Ilungasoft.Framework.Web之基于Callback的无刷新上传进度条控件[带源码]

共享一个基于Callback的无刷新上传进度条控件的源码。本控件使用的HttpMoudule基于宝玉的一个上传进度条的sample，这里封装为一个控件，方便使用。无需任何代码，只需设置web.config，添加HttpModule的引用，再将控件拖到页面就行。页面中的文件保存操作和传统的asp.net文件上传完全一样。可以设置属性上传过程中出错或上传成功时跳转到其它页面。兼容IE,Firefox,Opera。其它环境没测试，不过因为是基于Asp.Net2.0的callback，其他浏览器只要支持xmlhttp或iframe就应该支持。

在线演示请访问：http://teddy.cn/test

源码及示例下载
(在本机运行示例注意将程序所在目录设为对web帐号可写，否则上传文件是会权限不足报错)

下面简单列举一下示例中的web.config和Default.aspx和Default.aspx.cs。

web.config

 1<?xml version="1.0"?>
 2<configuration>
 3    <appSettings/>
 4    <connectionStrings/>
 5    <system.web>
 6        <compilation debug="true"/>
 7        <authentication mode="Windows"/>
 8    <httpModules>
 9      <add name="HttpUploadModule" type="Ilungasoft.Framework.Web.Modules.UploadProgressModule, Framework.Web"/>
10    </httpModules>
11    <httpRuntime maxRequestLength="1000000" executionTimeout="300"/>
12  </system.web>
13</configuration>

Default.aspx (注意Line 17必须设置控件的UploadButtonName为页面中出发上传事件的按钮运行时生成的input标签的name属性。对于包含模版页的情况，name可能形如：ctl00$ContentPlaceHolder1$Button1)

 1<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
 2
 3<%@ Register Assembly="Framework.Web" Namespace="Ilungasoft.Framework.Web.UI.WebControls"
 4    TagPrefix="cc1" %>
 5<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 6<html xmlns="http://www.w3.org/1999/xhtml">
 7<head id="Head1" runat="server">
 8    <title>Untitled Page</title>
 9</head>
10<body>
11    <form id="form1" runat="server">
12        <div>
13            <asp:FileUpload ID="FileUpload1" runat="server" /><br />
14            <br />
15            <asp:Button ID="Button1" runat="server" Text="Upload" OnClick="Button1_Click" /><br />
16            <br />
17            <cc1:UploadProgressBar ID="UploadProgressBar1" runat="server" UploadButtonName="Button1" UploadErrorRedirectUrl="UploadError.aspx">
18            </cc1:UploadProgressBar>
19            &nbsp;&nbsp;<br />
20            <br />
21        </div>
22    </form>
23</body>
24</html>

Default.aspx.cs

 1using System;
 2using System.Data;
 3using System.Configuration;
 4using System.Web;
 5using System.Web.Security;
 6using System.Web.UI;
 7using System.Web.UI.WebControls;
 8using System.Web.UI.WebControls.WebParts;
 9using System.Web.UI.HtmlControls;
10
11public partial class _Default : System.Web.UI.Page 
12{
13    protected void Page_Load(object sender, EventArgs e)
14    {
15
16    }
17    protected void Button1_Click(object sender, EventArgs e)
18    {
19        FileUpload1.SaveAs(Server.MapPath("test.tmp"));
20    }
21}

是不是没感觉到和使用该控件之前相比多了任何代码呢？；-）

Enjoy！

posted @ 2006-04-01 12:43 Teddy's Knowledge Base Views(7966) Comments(37) Edit 收藏

　回复　引用　查看　  
#1楼2006-04-01 14:10 | 深夜醉猫      
这个控件，我试用了，但是在上传文件的时候，不显示具体的进度！
只在上传完成的时候，显示“你上传的文件已经完成”！
看了你的代码，和那个一样，但是还是没有效果的！
　回复　引用　查看　  
#2楼2006-04-01 18:46 | Dflying Chen      
Cool!
　回复　引用　查看　  
#3楼[楼主]2006-04-01 18:58 | Teddy's Knowledge Base      
@深夜醉猫

如果你在本机测试，如果是XP，IE年、可能或有你说的问题出现，可以试试iis6下测试。在线演示就是win2003 iis6，应该不会有问题。另外，xp下即使IE有时有这样的问题，Firefox或Opera应该都没问题。你可以多试一下。
　回复　引用　查看　  
#4楼2006-04-01 19:41 | 深夜醉猫      
问题解决！
因为我是新建的文件系统网站，想了想去，感觉好像是这个的问题！
所以，我将项目添加到IIS管理，就可以显示具体的进度！
看来，微软这个文件系统的网站，还是。。。。。。。
希望大家在测试的时候不要，在文件系统网站上测试！
　回复　引用　  
#5楼2006-04-02 10:00 | hujh[未注册用户]
还有一个问题，这控件在模板页里面使用好像是无效的！

　回复　引用　查看　  
#6楼[楼主]2006-04-02 10:32 | Teddy's Knowledge Base      
@hujh

模版页面下没有测试，我会查看一下这个问题，尽快修复！
　回复　引用　查看　  
#7楼[楼主]2006-04-02 11:05 | Teddy's Knowledge Base      
刚在模版页面下做了测试，控件完全可用！

但是必须设置UploadButtonName属性为按钮的运行时生成的input标签的name属性。

形如：ctl00$ContentPlaceHolder1$Button1
　回复　引用　查看　  
#8楼2006-04-05 12:58 | cncxz(虫虫)      
为了便于在模板页使用

可以将源代码中的

Control ctl = Page.FindControl(UploadButtonName);

改成：
Control ctl = this.Parent.FindControl(UploadButtonName);

然后在使用时确保 Button控件和UploadProgressBar控件处于同一容器内即可
　回复　引用　查看　  
#9楼2006-04-15 23:12 | 梁广永      
收了，学习，
　回复　引用　  
#10楼2006-04-26 18:12 | 谔谔[未注册用户]
1using System;
2using System.Data;
3using System.Configuration;
4using System.Web;
5using System.Web.Security;
6using System.Web.UI;
7using System.Web.UI.WebControls;
8using System.Web.UI.WebControls.WebParts;
9using System.Web.UI.HtmlControls;
10
11public partial class _Default : System.Web.UI.Page
12{
13 protected void Page_Load(object sender, EventArgs e)
14 {
15
16 }
17 protected void Button1_Click(object sender, EventArgs e)
18 {
19 FileUpload1.SaveAs(Server.MapPath("test.tmp"));
20 }
21}
请问怎么更改上传文件的名字啊？
大哥帮帮忙，新手
　回复　引用　  
#11楼2006-05-06 10:02 | stars[未注册用户]
创建孔件是出错! 不能用好象,是不是还有什么其它的设置?
　回复　引用　查看　  
#12楼[楼主]2006-05-06 10:20 | Teddy's Knowledge Base      
@stars
不需要其他设置的，你可以将控件源码工程加入你的web项目进行调试。如果刚开始设计界面显示创建控件错误，可能是你还没有编译控件源码，建议全部编译一下。

另外，该控件现在已包含在NBear project中，你可以下载NBear的源码，里面包含有这个控件的使用范例，在NBear.WebTest工程的TestUploadPregress.aspx页面。
http://teddyma.cnblogs.com/articles/Ilungasoft_Framework.html
　回复　引用　  
#13楼2006-05-10 16:15 | 乐乐MS[未注册用户]
我用1G的景象文件上传,没有反映!!
　回复　引用　查看　  
#14楼[楼主]2006-05-10 16:20 | Teddy's Knowledge Base      
如果文件很大，要在web.config中设置设置更长的页面超时时间和允许商船文件大小，否则，可能就会如此~~

设置<system.web>中的

<httpRuntime maxRequestLength="1000000" executionTimeout="300"/>

为你需要的大小
　回复　引用　  
#15楼2006-05-12 11:07 | 乐乐MS[未注册用户]
assemblyname 这个我没指定 程序可用,指定了就不能用了.说找不到所指定的DLL?
还一个问题,我从IIS里打开测试页,上传文件就可以显示进度条,在VS里直接VIEW就不能显示进度条.
　回复　引用　查看　  
#16楼[楼主]2006-05-12 11:12 | Teddy's Knowledge Base      
"从IIS里打开测试页,上传文件就可以显示进度条,在VS里直接VIEW就不能显示进度条"
--是会有这个问题的，应该是vs.net的调试器的问题。
　回复　引用　  
#17楼2006-05-12 11:18 | 乐乐MS[未注册用户]
老大,你在线呢.
httpModules的TYPE 的 assemblyname 这个我没指定 程序可用,指定了就不能用了.说找不到所指定的DLL?
这个如果不指定对使用会有影响吗?
　回复　引用　查看　  
#18楼[楼主]2006-05-12 11:32 | Teddy's Knowledge Base      
程序可用就好，如果组件是放在独立的程序集，那么是要指定httpmodule的位置和名称的。如果放在相同的程序集，就不一定要设置assemblyName，具体可以参考msdn文档关于configuration的设置。
　回复　引用　  
#19楼2006-05-15 17:30 | 乐乐MS[未注册用户]
经过这几天研究,好象在文件系统下application不起作用
　回复　引用　查看　  
#20楼2006-06-05 17:54 | Androclus      
麻烦问一下，如何能够在电击上传后才显示进度条？完毕后自动隐藏？？


　回复　引用　  
#21楼2006-06-13 16:33 | yeyarong[未注册用户]
问一下，ctl00$ContentPlaceHolder1$Button1，其中的ctl00代表什么？
谢谢！
　回复　引用　查看　  
#22楼[楼主]2006-06-13 17:01 | Teddy's Knowledge Base      
@yeyarong
ctl00是当页面使用MasterPage时，所有的服务段控件render成html时，asp.net自动添加的id前缀。
　回复　引用　  
#23楼2006-06-14 14:21 | yeyarong[未注册用户]
@Teddy's Knowledge Base
非常感谢，知道是怎么回事了。
　回复　引用　  
#24楼2006-06-16 08:41 | njrc[未注册用户]
使用了你的进度条控件，感觉确实很好用，但在我的页面中，有一个小问题，能正常显示进度条，但我的upload button的动作较多，其中最后一个是：上传完成后将文件信息写入数据库并重定向到另一个页面，使用你的控件后，能将信息写入数据库，但无法重定向页面，盼解
　回复　引用　查看　  
#25楼[楼主]2006-06-16 21:34 | Teddy's Knowledge Base      
@njrc
你可以设置控件的UploadCompleteRedirectUrl属性，商船完成后重定向页面。
　回复　引用　  
#26楼2006-06-17 15:09 | njrc[未注册用户]
还是不行，没有反应。据我观察，你的进度条显示的是将文件读取到服务器内存的进度，而我的程序要在程序到内存后进行文件名和大小的检测等！所以好像不行。另外，用了你的控件后，这个页面好像所有的button没反应了，比如点击注销，注销动作也做了，但页面就是不更新，这是怎么回事？
　回复　引用　查看　  
#27楼2006-07-22 17:27 | Walkdan      
能否支持多个FileUpload？
　回复　引用　查看　  
#28楼[楼主]2006-07-22 17:28 | Teddy's Knowledge Base      
@Walkdan
可以
　回复　引用　  
#29楼2006-08-03 20:24 | 易帆[未注册用户]
分析器错误信息: 无法识别的配置节“connectionStrings”

源错误:


行 2： <configuration>
行 3： <appSettings/>
行 4： <connectionStrings/>
行 5： <system.web>
行 6： <compilation debug="true"/>

我的提示上述错误怎么回事呀
　回复　引用　  
#30楼2006-08-27 20:57 | icechians[未注册用户]
跟@njrc 的一样
上传文件后所有按纽都失效了，不知道什么原因？
　回复　引用　查看　  
#31楼[楼主]2006-08-28 10:06 | Teddy's Knowledge Base      
@易帆
@icechians

该功能的实现会将当前的form的target指向一个动态生成的frame，所以上船后看起来按钮会好像实效一样。建议设置控件的上传成功及失败后的跳转页面属性，在创成之后跳转到另一页面。

另外，这个组件由于该组件的颇多限制和不稳定性，我会在今后的NBear中移除该组件，并且不再提供技术支持。有需要的朋友请基于之前的版本的源码自行进行修改。
　回复　引用　  
#32楼2007-03-09 16:16 | xymclone[未注册用户]
Framework 是不是一定要2.0呀
　回复　引用　  
#33楼2007-07-13 16:39 | macless[未注册用户]
多文件上传有问题,传是可以传,但是文件不对.
　回复　引用　  
#34楼2007-09-04 09:56 | ghg[未注册用户]
gfhgfhgfh
　回复　引用　  
#35楼2007-09-04 09:56 | ghg[未注册用户]
hgfhgfhgfhgf
　回复　引用　查看　  
#36楼2009-12-29 13:03 | guiying      
你好 我在上传的过程中 出现了 这样的情况

一直就差 37kb 没有传输完成
最新IT新闻:
· 伊朗封杀Gmail和Facebook等互联网服务
· 分析称专利之争让谷歌苹果两败俱伤
· Android平台发现新型手机病毒Rootsmart
· HTC首款Android4.0手机大曝光
· 这是不是你期待的 iPad 3？
» 更多新闻...