赫芬顿邮报 app英文版:使用Anthem.NET 1.5中的FileUpload控件实现Ajax方式的文件上传

来源:百度文库 编辑:中财网 时间:2024/04/27 22:25:24
使用Anthem.NET 1.5中的FileUpload控件实现Ajax方式的文件上传

Anthem.NET(我的介绍和比较,还有一篇)刚刚发布了其最新的1.5版本,其中很不错的一个新功能就是对文件上传功能的Ajax实现。本文将简要介绍一下该功能的使用方法。

 

Anthem.NET的下载与安装

Anthem.NET可以在此下载:http://sourceforge.net/project/showfiles.php?group_id=151897&package_id=168043&release_id=493609

下载之后解压缩至硬盘中的某一目录中,编译项目得到Anthem.dll。然后将其拷贝到Web站点的bin目录下:

打开Web站点的Web.config文件,在configuration>\ \ \ 中添加如下一行,注册Anthem.NET控件:

.csharpcode, .csharpcode pre{font-size: small;color: black;font-family: consolas, "Courier New", courier, monospace;background-color: #ffffff;/*white-space: pre;*/}.csharpcode pre { margin: 0em; }.csharpcode .rem { color: #008000; }.csharpcode .kwrd { color: #0000ff; }.csharpcode .str { color: #006080; }.csharpcode .op { color: #0000c0; }.csharpcode .preproc { color: #cc6633; }.csharpcode .asp { background-color: #ffff00; }.csharpcode .html { color: #800000; }.csharpcode .attr { color: #ff0000; }.csharpcode .alt{background-color: #f4f4f4;width: 100%;margin: 0em;}.csharpcode .lnum { color: #606060; }

Anthem.NET提供了一套自己就带有Ajax功能的、继承于现有ASP.NET控件的服务器端控件。根据上面在web.config文件中的注册,这部分控件的前缀为anthem。

Anthem.NET支持ASP.NET 1.1和ASP.NET 2.0,不过本文的示例程序均基于ASP.NET 2.0。

 

普通的ASP.NET文件上传

先看一下普通的ASP.NET文件上传功能的实现,代码如下:

  OnClick="defaultUploadButton_Click" Text="Upload" />

后台代码,只是简单地将文件名和文件大小显示出来:

protected void defaultUploadButton_Click(object sender, EventArgs e)
{
    defaultResultLabel.Text = string.Format("File \"{0}\" uploaded ({1} bytes).",
        defaultFileUpload.FileName,
        defaultFileUpload.FileBytes.Length
    );
}

 

Anthem.NET的Ajax文件上传

Anthem.NET中的Ajax文件上传功能靠的是其自己的FileUpload控件,其实使用起来和普通的ASP.NET FileUpload控件差不多,下面是HTML部分的代码:

    runat="server" Text="Upload" OnClick="anthemUploadButton_Click" />

注意控件的前缀都是anthem。那个Button的TextDuringCallBack属性设置了异步回送时按钮中的文本;EnabledDuringCallBack属性让该按钮在进行异步回送时禁用,免得用户等得不耐烦。

后台代码同样是将文件名和文件大小显示出来,不过注意这一句anthemResultLabel.UpdateAfterCallBack = true;,用来在回调之后更新anthemResultLabel上的文字:

protected void anthemUploadButton_Click(object sender, EventArgs e)
{
    anthemResultLabel.Text = string.Format("File \"{0}\" uploaded ({1} bytes).",
        anthemFileUpload.FileName,
        anthemFileUpload.FileBytes.Length
    );
    anthemResultLabel.UpdateAfterCallBack = true;
}

 

示例程序演示

示例程序的界面如下,上面部分是普通的ASP.NET文件上传,下面是Anthem.NET的Ajax文件上传:

使用普通的ASP.NET文件上传,可以看到页面有一次闪烁,不过上传功能没什么问题:

而使用下面部分的Anthem.NET的Ajax文件上传,可以看到上传时的界面(按钮禁用,文本变化):

上传完成之后,没有页面闪烁:

打开Fiddler看看HTTP请求,上面的是传统上传,下面是Ajax的,差别显而易见……

 

代码下载

本文提到的完整的示例程序代码:http://www.cnblogs.com/Files/dflying/AnthemNETFileUploadDemo.zip

 

更多参考资料

Anthem.NET官方网站:http://sourceforge.net/projects/anthem-dot-net/

Anthem.NET在线文档:http://anthem-dot-net.sourceforge.net/docs/

Anthem.NET在线示例程序:http://anthem.talloaksoftware.com/Default.aspx

Fiddler官方网站:http://www.fiddlertool.com/