最近，CodePlex网站上发布了AJAX Control Toolkit的新版本。这个新版本包含了两个新的控件：SeaDragon Java Script Code (SJC)和AsyncFileUpload。SJC控件允许使用SeaDragon脚本来显示图像，并通过鼠标按钮键放大和缩小图像，而无需调整窗口大小。看了演示，这是一个非常酷的控件。而AsyncFileUpload控件则允许异步上传文件，这意味着可以在不进行回发的情况下上传文件。在上传过程中，控件会显示一个跳动的图像，并在上传完成时触发客户端和服务器端事件。
在本文中，将重点介绍AsyncFileUpload控件。需要注意的是，这个控件仅支持.NET 3.5或更高版本。
众所周知，ASP.NET的文件上传控件不能在更新面板中工作。如果想将其放置在更新面板中，那么还需要一个回发触发器来上传文件。这个酷控件允许以异步方式上传文件。以下是关于这个控件的一些关键点：
但是，它也有一些缺点：
尽管有这些缺点，但这个控件看起来不错。现在，让来了解一些这个控件的属性和方法。
以下是一些可用的属性：
CompleteBackColor: 这个属性设置了控件在成功上传时的背景颜色。默认值是"Lime"。ErrorBackColor: 这个属性设置了控件在上传不成功时的背景颜色。默认值是"Red"。UploadingBackColor: 这个属性设置了文件上传进行中时控件的背景颜色。UploaderStyle: 控件的样式有两种选择：传统和现代。默认是"Traditional"。ThrobberID: 在文件上传时显示的控件的ID。它将用于显示加载/进行中的图像。HasFile: 返回一个布尔值，指示控件是否有文件。以下是一些可用的事件：
OnClientUploadError: 这是一个客户端事件。如果有不成功的上传，那么指定的JavaScript函数将被执行。OnClientUploadStarted: 这也是一个客户端事件。当上传开始时，指定的JavaScript函数将被调用。这个事件将在上传之前被调用，一旦这个函数被执行，上传就会开始。OnClientUploadComplete: 这也是一个客户端事件。如果有成功的上传，那么指定的JavaScript函数将被执行。onuploadedcomplete: 这是一个服务器端事件，一旦上传完成，它将被执行。需要注意的一点是，一旦选择了文件，上传就会开始，但它仍然保留在会话中。它没有存储在任何物理位置。在这个事件中，可以指定路径并将文件保存到物理位置。一旦通过代码，事情就会变得清晰。以下是一些可用的方法：
SaveAs(): 这个方法将文件保存在指定的路径上。让创建一个新的网站，并添加一个新下载的AjaxControl ToolKit DLL的引用。在default.aspx页面上，放置一个脚本管理器并注册Ajax控制工具包DLL。
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
现在让放置AsyncFileUpload控件：
<cc1:AsyncFileUpload ID="AsyncFileUpload1" Width="400px" runat="server" OnClientUploadError="uploadError" OnClientUploadStarted="StartUpload" OnClientUploadComplete="UploadComplete" CompleteBackColor="Lime" UploaderStyle="Modern" ErrorBackColor="Red" ThrobberID="Throbber" onuploadedcomplete="AsyncFileUpload1_UploadedComplete" UploadingBackColor="#66CCFF" />
可以将其放置在更新面板内或更新面板外。如所见，已经设置了上面已经解释过的大多数属性和事件。让放置Throbber控件以显示进度图像。设置ThrobberID不是强制性的。如果它被设置，那么它将显示控件的内容。
<asp:Label ID="Throbber" runat="server" Style="display: none">
<img src="Images/indicator.gif" align="absmiddle" alt="loading" />
</asp:Label>
还放置了一个标签在页面上，显示上传的状态。这个控件的值通过客户端函数更新。
<asp:Label ID="lblStatus" runat="server" Style="font-family: Arial; font-size: small;"></asp:Label>
让放置JavaScript函数：
<script type="text/javascript" language="javascript">
function uploadError(sender, args) {
document.getElementById('lblStatus').innerText = args.get_fileName() + "" + args.get_errorMessage() + "";
}
function StartUpload(sender, args) {
document.getElementById('lblStatus').innerText = 'Uploading Started.';
}
function UploadComplete(sender, args) {
var filename = args.get_fileName();
var contentType = args.get_contentType();
var text = "Size of " + filename + " is " + args.get_length() + " bytes";
if (contentType.length > 0) {
text += "and content type is '" + contentType + "'.";
}
document.getElementById('lblStatus').innerText = text;
}
</script>
UploadComplete函数在屏幕上显示文件名、其大小和内容类型。
以下是UploadedComplete事件的服务器端代码：
protected void AsyncFileUpload1_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e) {
System.Threading.Thread.Sleep(5000);
if (AsyncFileUpload1.HasFile) {
string strPath = MapPath("~/Uploads/") + Path.GetFileName(e.filename);
AsyncFileUpload1.SaveAs(strPath);
}
}
就是这样。现在只需运行应用程序。