AjaxControlToolkit--AsyncFileUpload

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

 

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

属性	说明
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 " ; 
}

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

 

 

 1 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就更好了...