AsyncFileUpload 控件 - Ajax 控件工具包中的新控件

• 下载源代码 - 1.16 MB

引言

对于每个 .NET 开发者来说，Ajax Control Toolkit 并不陌生。新版本的 AJAX Control Toolkit 现在可以从 CodePlex 网站下载。这个新版本的 AJAX Control Toolkit 包含两个新控件：

1. SeaDragon Java Script Code (SJC) - SJC 控件允许使用 SeaDragon 脚本显示图像，并使用鼠标按键缩放该图像，而无需调整窗口大小。我看到了 演示，这是一个非常酷的控件。
2. AsyncFileUpload - 终于，我们有了一个可以异步上传文件的控件。这个新控件使您可以在不进行回发的情况下执行文件上传。控件在上传期间显示一个转动图像，并在上传完成后触发客户端和服务器事件。在这里查看实时 演示。

在本文中，我们将重点介绍 AsyncFileUpload 控件。

注意：此控件仅适用于 .NET 3.5 或更高版本。

AsyncFileUpload 控件特性

众所周知，ASP.NET 的文件上传控件在 update panel 中无法正常工作。如果我们想将其放在 update panel 中，还需要触发回发才能上传文件。这个很棒的控件允许您以异步方式上传文件。以下是关于此控件的一些关键点：

1. 它可以在 Update Panel 中工作
2. 它在没有任何回发的情况下上传文件
3. 它提供客户端和服务器端事件
4. 有不同的着色选项用于显示文件上传。例如，上传成功时显示绿色，上传失败时显示红色。
5. 您可以在文件上传进行时显示加载图像。

但是它也有一些缺点

1. 当我使用该控件时，一旦文件上传完毕，就没有办法清除文件上传控件的内容。
2. 我查看了此控件的源代码，发现该控件将文件存储在 Session 中。它从不清除 Session，这意味着每次返回页面时，它都会将上次上传的文件加载到文本框中。
3. 没有办法取消上传。
4. 没有办法监控上传进度（完成了多少百分比）。
5. 一旦您选择文件，上传就开始了。它将文件存储在 Session 中。

除了这些缺点，该控件看起来还是不错的。

现在让我们来看一下该控件的一些属性。

属性和方法

一些可用属性

• CompleteBackColor：此属性设置控件在成功上传时的背景颜色。默认值为 "Lime"。

  

• ErrorBackColor：此属性设置控件在上传失败时的背景颜色。默认值为 "Red"。

• UploadingBackColor：此属性设置控件在文件上传进行时的背景颜色。

  

• UploaderStyle：控件的样式有两种选项。传统和现代。默认值为 "Traditional"。

• ThrobberID：在文件上传期间显示的控件的 ID。它将用于显示加载/进行中图像。

• HasFile：返回一个 bool 值，指示控件是否具有文件。

可用事件

• OnClientUploadError：这是一个客户端事件。如果上传失败，则会执行指定的 JavaScript 函数。

• OnClientUploadStarted：这也是一个客户端事件。当上传开始时，将调用指定的 JavaScript 函数。此函数将在上传前调用，一旦执行此函数，上传就会开始。

• OnClientUploadComplete：这也是一个客户端事件。如果上传成功，则会执行指定的 JavaScript 函数。

• onuploadedcomplete：这是一个服务器端事件，将在上传完成后执行。这里需要注意的一点是，一旦您选择文件，上传就开始了，但它仍然在 Session 中。它没有存储在任何物理位置。在此事件中，我们可以指定路径并将文件保存到物理位置。一旦我们完成代码，事情就会变得清晰。

可用方法

• SaveAs()：此方法将文件保存在指定路径。

Using the Code

让我们创建一个新的网站，并添加对新下载的 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" />

我们可以将其放置在 update panel 内或外。正如您所见，我已经设置了上面解释过的大部分属性和事件。让我们放置 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(), 
	"<span style='color:red;'>" + args.get_errorMessage() + "</span>";
}

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);
  }
}

好了。一切就绪。现在只需运行应用程序。

结论

这是一个很棒的控件，具有良好的用户体验，但如上所述，我找不到一种方法来清除控件的内容，即使刷新页面也是如此。另一件令人烦恼的事情是，一旦您选择任何文件，它就开始上传。另一项缺失的功能是它不能以百分比显示进度。尽管存在一些缺点，但我发现这个控件非常有用。希望看到该工具得到一些改进。

另外，阅读我关于 ASP.NET 5 的系列文章。

尽情享受吧。