简介
AJAX控件工具包是不是新的。NET开发每。 AJAX Control Toolkit中的一个新版本现在从网站下载。 AJAX Control Toolkit中的这个新版本包含了两个新的管制措施:海龙Java Script代码(SJC) - SJC控制允许海龙脚本,用于显示图像,放大和没有调整窗口的大小,使用鼠标按键的形象。我看到了和它的一个非常酷的控制。AsyncFileUpload - 最后,我们有一个控制上传文件异步。这种新的控制,使您可以执行上传文件,而不做回发。控制显示上载过程中的一个throbber形象和提高客户端和服务器事件,当上传完成。检查现场演示。
在这篇文章中,我们将采取在thenbsp外观; AsyncFileUpload控制。
注意:此控件将只与NET 3.5或更高版本。AsyncFileUpload控制功能
我们知道,文件上传的ASP.NET控件不更新面板内的工作。如果我们想更新面板的地方,然后还回传触发是需要上传的文件。这种冷却控制,允许您上传文件,以异步方式。以下是有关此控制的几个关键点:它的工作范围内的更新面板它没有任何回发的文件上传它提供了客户端和服务器端的事件有不同的着色选项显示文件上传。例如,它显示绿色,如果上传成功,否则显示红色,如果有不成功的上传。您可以显示加载图像文件上传的进度。
,但它也带有一定的弊端:当我与控制工作,一旦文件上传有没有办法明确的文件上传控件的内容。我走进了此控件的源代码,并注意到控制文件存储在Session。它从来没有清除会话,这意味着每次回到导航页面加载的最后一个文件上传到文本框中。有没有办法取消upload.nbsp;有没有办法监控上传进度(完成多少%)。只要你选择文件开始上传。它存储在会话中的文件。
thenbsp;控制除了这些缺点,看起来不错。
现在让我们通过此控件的属性。属性和方法
一些可用的属性
CompleteBackColor:此属性设置背景颜色的控制上传成功。默认值是quot; Limequot;
{S0}
ErrorBackColor:此属性设置不成功上传控制的背景颜色。默认值是quot; Redquot;
UploadingBackColor:此属性设置控件的背景颜色,当文件上传的进度。
{S1}
UploaderStyle:有两个选项可用于控制样式。传统与现代。默认是quot; Traditionalquot;
ThrobberID:文件上传时显示的控件的ID。它将被用来显示在加载/形象进度。
HasFile:返回一个bool值表示whethernbsp;控制文件或。可用事件
OnClientUploadError:这是一个客户端事件。如果有一个不成功的上传,然后thenbsp指定的JavaScript函数将被执行。
OnClientUploadStarted:这也是一个客户端事件。上传启动时,指定的JavaScript函数将被调用。上传此事件之前被调用一次执行此功能,将开始上传。
OnClientUploadComplete:这也是一个客户端事件。如果有一个成功的上传,然后指定的JavaScript函数将被执行。
onuploadedcomplete:这是一个服务器端事件将执行一次完成上传。在这里要注意的是,只要你选择的文件,上传启动,但它仍保留在会话。它不会被保存在任何物理位置。在这种情况下,我们可以指定路径和文件保存到物理位置。事情会明确的,一旦我们通过代码。可用的方法另存为():该方法保存文件指定的路径。使用代码
让我们创建一个新的网站,并添加新下载的AjaxControl工具包DLL的参考。在default.aspx页面中,放置一个脚本管理和注册AJAX Control Toolkit中的DLL。<%@ Register Assembly="AjaxControlToolkit"
Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
现在,让我们的地方AsyncFileUpload控制:{C}
我们可以将更新面板内部或外部更新面板。正如你可以看到,我setnbsp;我已经解释过上述的属性和事件。让我们的地方Throbber控制形象进度显示。这不是强制ThrobberID。如果它被设置,那么它将显示控制的内容。<asp:Label ID="Throbber" runat="server" Style="display: none">
<img src="Images/indicator.gif" align="absmiddle" alt="loading" />
</asp:Label>
我也放在一个标签页,显示上传的状态。这种控制的价值得到更新,通过客户端功能。<asp:Label ID="lblStatus" runat="server" Style="font-family: Arial;
font-size: small;"></asp:Label>
,让我们的地方JavaScript函数:<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>
UploadComplete功能displayes文件名,它的大小和屏幕上的内容类型。
下面是UploadedComplete事件的服务器端代码: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);
}
}
就是这样。我们是好去。现在只需运行该应用程序。结论
这是一个良好的用户体验一些冷却控制,但由于上述我不能找到一种方法,以清除控制的内容,即使你刷新页面。另一件事,是很烦人的,只要你选择的任何文件,它开始上传。另一个缺乏的特点是,它并没有显示百分比进度。尽管存在着一些缺点,我发现这种控制非常有用。希望看到一些增强这个工具。
享受。