Teddy's Knowledge Base

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 on 2006-04-01 12:43 Teddy's Knowledge Base 阅读(5960) 评论(36)  编辑 收藏 所属分类: Web Dev.Ent. App. Dev.

评论

#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   回复  引用  查看    


标题  
姓名  
主页
Email (只有博主才能看到) 
验证码 *  看不清,换一张 [登录][注册]
内容(请不要发表任何与政治相关的内容)  
  登录  使用高级评论  新用户注册  返回页首  恢复上次提交      
该文被作者在 2006-04-02 14:23 编辑过
 
另存  打印
最新IT新闻:
· 深藏33年Unix操作系统bug被消灭
· Expression Studio 2.0 中文版发布了
· 雅虎首页大变脸 阿里风格上身
· 万名Linux使用者向暴雪请愿Linux版《Diablo III》
· 56.com我乐网将全面转行 退出视频行业