Anthem.NET FileUpload控件实现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> <system.web> <pages> <controls>中添加如下一行,注册Anthem.NET控件:

<add tagPrefix="anthem" namespace="Anthem" assembly="Anthem"/>

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文件上传功能的实现,代码如下:

<asp:FileUpload ID="defaultFileUpload" runat="server" />
<asp:Button ID="defaultUploadButton" runat="server" 
  OnClick="defaultUploadButton_Click" Text="Upload" />
<asp:Label ID="defaultResultLabel" runat="server" Text=""></asp:Label>

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

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部分的代码:

<anthem:FileUpload ID="anthemFileUpload" runat="server" />
<anthem:Button ID="anthemUploadButton" TextDuringCallBack="uploading..." EnabledDuringCallBack="false"
    runat="server" Text="Upload" OnClick="anthemUploadButton_Click" />
<anthem:Label ID="anthemResultLabel" runat="server" Text=""></anthem:Label>

注意控件的前缀都是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;
}
posted @ 2014-09-16 11:26  cclient  阅读(134)  评论(0编辑  收藏  举报