|
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下工作。优点如下：
- 它能够在update panel下工作。
- 它上传文件时不需要postback.
- 它提供客户端和服务器端的德事件。
- 它可以通过设置不同的颜色来显示文件上传是否成功。比如：上传成功时显示绿色，失败时显示为红色。
缺点：
- 一旦开始上传文件无法取消。
- 无法跟踪上传进度，百分比。
- 文件保存在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);
}
}
| 
转播
