9月30日的AjaxControlToolkit 30930里增加了两个新的控件:AsyncFileUpload和Seadragon,貌似目前园子里还没人写过...
就试着自己写写吧
本人.net小白,有什么错误的地方望大家指出。
其实AjaxControlToolkit 挺傻瓜化的,先在VS建立歌网站,然后打开默认的default.aspx,拖个ScriptManager进去,添加下AjaxControlToolkit 的注册,然后拖个AsyncFileUpload进去,就基本能用了...
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
10
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
11
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
12
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
13
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
14
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
15
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
16
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
17
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
18
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
19
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
20
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
21
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
然后我们看下几个有用的属性吧:
| 说明 |
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 (当然,文本也可以),好在上传文件时页面上有点显示,这年头不是都强调用户体验嘛
还需要个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() + " ”正在上传,请稍等" ;
}最后是上传完成后的提示:
{
document.getElementById( ' Labeluploadstatus ' ).innerText = " 文件“ " + args.get_fileName() + " ”上传完成,文件大小: " + args.get_length() + " bytes " ;
}
然后就是写服务器事件了:
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
2
![ExpandedBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
![ContractedBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
8
![ExpandedSubBlockStart.gif](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
![ContractedSubBlock.gif](https://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif)
![](https://www.cnblogs.com/Images/dot.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
10
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
11
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
12
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
13
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
14
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
15
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
16
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
基本大功告成,上图看下效果吧:
大体就这些吧
有错误的地方请大家指正
另外那个Seadragon挺好玩的,要是能自动生成所需的图片和XML就更好了...