AJAX Control Toolkit的AsynFileUpload控件

AJAX Control Toolkit最近有两个新的控件添加了进来。你可以去codeplex网站下载最新的版本。新增的两个控件：

1.       SeaDragon Java Script Code(SJC) – SJC控件使用SeaDragon脚本来显示一个图片，通过鼠标的点击按钮可以放大和缩小图片，你可以在这个地方看它的demo。

2.       AsyncFileUpload – ajaxcontroltool kit终于有了一个上传文件的ajax控件。当上传文件时会有一个图片显示,而当图片上传完成时会触发客户端和服务器端的事件。你可以在这里看它的demo.

在这篇文章中说明一下如何AsyncFileUpload的优缺点和如何使用。

注意: 这个控件只在.NET 3.5或更高版本上才能工作。

 

优缺点介绍：

Asp.net的上传文件控件都不能使用updatepanel.如果你需要在updatePanel中使用上传文件控件必须使用一个trigger来postpback进行上传文件。这个fileupload控件解决了以前的问题，可以直接在updatepanel下工作。优点如下：

1. 它能够在update panel下工作。
2. 它上传文件时不需要postback.
3. 它提供客户端和服务器端的德事件。
4. 它可以通过设置不同的颜色来显示文件上传是否成功。比如：上传成功时显示绿色，失败时显示为红色。

 

缺点：

1. 一旦开始上传文件无法取消。
2. 无法跟踪上传进度，百分比。
3. 文件保存在session中。也就是说每次打开页面都会显示上次上传的最后那个文件的信息。

 

属性和方法：

 

使用控件:

 

1.       在aspx页面注册控件。

   <%@ Register Assembly="AjaxControlToolkit"

Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

2.       添加一个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" />

3.       可以在update panel里面或外面添加一个AsynFileUpload控件。大部分属性已经在上面设置完成。Throbber用来显示文件上传时应该显示的图片。这里设置为ID为Throbber的label：

<asp:Label ID="Throbber" runat="server" Style="display: none">

<img src="Images/indicator.gif" align="absmiddle" alt="loading" />

</asp:Label>

4.       这里还需要一个label来显示文件最终是否上传成功。它的显示内容由javascript来生成。也就是客户端事件执行的代码。

<asp:Label ID="lblStatus" runat="server" Style="font-family: Arial;

font-size: small;"></asp:Label>

5.       当上传文件完成时执行的客户端代码：

    <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>

6.       当上传文件完成时执行的服务器端代码：

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

  }

}