AjaxControlToolkit--AsyncFileUpload

9月30日的AjaxControlToolkit 30930里增加了两个新的控件：AsyncFileUpload和Seadragon，貌似目前园子里还没人写过...

就试着自己写写吧

本人.net小白，有什么错误的地方望大家指出。

其实AjaxControlToolkit 挺傻瓜化的，先在VS建立歌网站，然后打开默认的default.aspx，拖个ScriptManager进去，添加下AjaxControlToolkit 的注册，然后拖个AsyncFileUpload进去，就基本能用了...

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
2

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
4

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd%22>
6

<html xmlns="http://www.w3.org/1999/xhtml%22>
8

<head runat="server">
9

<title>AsyncFileUpload</title>
10

</head>
11

<body>
12

<form id="form1" runat="server">
13

<div>
14

<asp:ScriptManager ID="ScriptManager1" runat="server">
15

</asp:ScriptManager>
16

<cc1:AsyncFileUpload ID="AsyncFileUpload1" runat="server" />
17

</div>
18

</form>
19

</body>
20

</html>
21

然后我们看下几个有用的属性吧：

`属性`	说明
`CompleteBackColor`	上传成功后显示的颜色（默认为淡黄绿色Lime）
ErrorBackColor	上传出错后显示的颜色（默认为红Red）
UploadingBackColor	正在上传时显示的颜色（默认为白）
UploaderStyle	有两种选择，Traditional 和 Modern，默认是Traditional，没大弄明白两者在实际中的区别，希望有明白的大大帮我解答一下吧
ThrobberID	在上传文件时显示的控件的ID，一般是用GIF图片
HasFile	返回一个布尔值，来判断是否存在文件

其他还有几乎控件都通用的Width，Length，Font，Border，CSS样式之类的属性就不介绍了

再来看下控件的事件吧:

事件	执行方式	说明
`OnClientUploadError`	Client	当上传出错事执行
`OnClientUploadStarted`	Client	当上传开始时执行
`OnClientUploadComplete`	Client	当上传完成时执行
`onuploadedcomplete`	Server	当上传完成时执行

有了属性和事件，就重新定义下我们的AsyncFileUpload吧:

我们首先需要个Image （当然，文本也可以），好在上传文件时页面上有点显示，这年头不是都强调用户体验嘛

<asp:Image ID="ImageUploading" runat="server" ImageUrl="/images/loader.gif"/>

还需要个Label，好显示上传前后的信息:

<asp:Label ID="Labeluploadstatus" runat="server" Text=""></asp:Label>

好了，现在可以定义我们的AsyncFileUpload了:

<cc1:AsyncFileUpload ID="AsyncFileUpload1" Width="300px" runat="server"
            OnClientUploadError="AsyncFileUpload1_UploadError" OnClientUploadStarted="AsyncFileUpload1_StartUpload"
            OnClientUploadComplete="AsyncFileUpload1_UploadComplete"
            CompleteBackColor="Lime" UploaderStyle="Modern"
            ErrorBackColor="Red" ThrobberID="ImageUploading"
            onuploadedcomplete="AsyncFileUpload1_UploadedComplete"
            UploadingBackColor="Blue" />

接着开始写JavaScript事件:

首先是上传失败的提示:

function AsyncFileUpload1_UploadError(sender, args)
{
document.getElementById('Labeluploadstatus').innerText = "对不起，文件“" + args.get_fileName() + "”上传出错，原因：" + args.get_errorMessage() ;
}

然后是开始上传时的提示:

function AsyncFileUpload1_StartUpload(sender, args)
{
document.getElementById('Labeluploadstatus').innerText = "文件“" + args.get_fileName() + "”正在上传，请稍等";
}

最后是上传完成后的提示:

function AsyncFileUpload1_UploadComplete(sender, args)
{
document.getElementById('Labeluploadstatus').innerText = "文件“" + args.get_fileName() + "”上传完成，文件大小：" + args.get_length() + " bytes";
}

然后就是写服务器事件了:

protected void AsyncFileUpload1_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
2