9月30日的AjaxControlToolkit 30930里增加了两个新的控件：AsyncFileUpload和Seadragon，貌似目前园子里还没人写过...
就试着自己写写吧
本人.net小白，有什么错误的地方望大家指出。
其实AjaxControlToolkit 挺傻瓜化的，先在VS建立歌网站，然后打开默认的default.aspx，拖个ScriptManager进去，添加下AjaxControlToolkit 的注册，然后拖个AsyncFileUpload进去，就基本能用了...
1
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
2
3<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
4
5<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd%22>
6
7<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
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 2
3
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %> 4
5
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd%22> 6
7
<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样式之类的属性就不介绍了
再来看下控件的事件吧:
|
事件 |
执行方式 |
说明 |
|
|
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";
}
{
document.getElementById('Labeluploadstatus').innerText = "文件“" + args.get_fileName() + "”上传完成，文件大小：" + args.get_length() + " bytes";
}
然后就是写服务器事件了:
1protected void AsyncFileUpload1_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
2
{
3
System.Threading.Thread.Sleep(5000);//由于本机上传速度太快，所以延迟下好看上传时的效果
4 //取当前时间，以时间+文件名来保存上传文件
5 DateTime dt = DateTime.Now.ToLocalTime();
6 //判断是否有文件，有则保存
7 if (AsyncFileUpload1.HasFile)
8
{
9 //设置文件路径和文件名
10 string strPath = MapPath("~/Uploads/") + dt.ToString().Trim().Replace("/", "-").Replace(":","：") + e.filename.ToString().Trim();
11 //保存文件
12 AsyncFileUpload1.SaveAs(strPath);
13
}
14
15
}
16
protected void AsyncFileUpload1_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e) 2
{ 
3
System.Threading.Thread.Sleep(5000);//由于本机上传速度太快，所以延迟下好看上传时的效果 4
//取当前时间，以时间+文件名来保存上传文件 5
DateTime dt = DateTime.Now.ToLocalTime(); 6
//判断是否有文件，有则保存 7
if (AsyncFileUpload1.HasFile) 8
{ 
9
//设置文件路径和文件名 10
string strPath = MapPath("~/Uploads/") + dt.ToString().Trim().Replace("/", "-").Replace(":","：") + e.filename.ToString().Trim(); 11
//保存文件 12
AsyncFileUpload1.SaveAs(strPath); 13
} 14
15
}16
基本大功告成，上图看下效果吧:
大体就这些吧
有错误的地方请大家指正
另外那个Seadragon挺好玩的，要是能自动生成所需的图片和XML就更好了...