自定义 AsyncFileUpload (Microsoft Ajax control toolkit)，也适用于跨浏览器

• 下载 FileUploaderAjax40 - 1.06 MB (VS2010 + .NET 4.0)
• 下载 FileUploaderAjax35 - 1.05 MB (VS2005 + .NET 3.5)

引言

本文介绍如何自定义 Microsoft Ajax control toolkit 中 AsyncFileUpload 的外观。 提供适用于 VS 2010 和 VS 2005 的源代码。 还有一个实时演示，您可以查看它的运行方式。

背景

Ajax control toolkit 是一个 Microsoft 开源项目。 在该工具包中，有一个非常有用的控件称为“AsyncFileUpload”。 您可以在此处查看 Microsoft 的官方演示。

它功能强大，但很难通过其内置属性进行自定义。

我成功地通过两种方法对其进行了自定义。 您可以在此处查看我的实时演示。

Using the Code

提取源代码后，您可以直接打开解决方案文件（一个是用于 VS2010，另一个是为了以防万一用于 VS2005）。

为了简单起见，它们都在“网站”项目下而不是“Web应用程序”下进行编辑。 您可以通过从 IDE 单击“运行”来直接运行它们。

注意：VS2010 项目需要在本地安装 .NET 4.0 才能进行调试。 VS2005 项目需要在本地安装 .NET 3.5 才能进行调试。

关注点

自定义 AsyncFileUploader 的基本思想是使用掩码技巧

您使 AsyncFileUploader 透明，并让一个按钮或图像看起来覆盖了 AsyncFileUploader。 但实际上，AsyncFileUploader 位于掩码按钮/图像的顶部。 因此，用户似乎单击了掩码的自定义按钮/图像，但实际上单击了 AsyncFileUploader。

这只是基本思想。 我通过两种方法实现它。

方法 1 简单快捷。 基本上，您制作一个与 AsyncFileUploader 类似大小的自定义按钮。 这种方法的限制是您无法制作大按钮，因为 AsyncFileUploader 本身的大小很难调整（特别是高度，如果可能的话）。

方法 2 让我为自己感到自豪：这个想法是您无法轻松调整 AsyncFileUploader 的大小，但是您可以移动它。 所以我将其移动到大图像按钮的内部。 无论用户何时单击，都会单击 AsyncFileUploader。

为了更清楚地说明，我有一个 X/Y 位置框，用于显示鼠标在图像范围内时的位置。 如果您真的想查看内部控件的移动方式，则可以更改控件的透明值（0 表示完全透明，您可以将其更改为 50 表示半透明）。

需要注意的事项

我没有找到一个优雅地捕获超大尺寸上传问题的好方法。 我尝试了global.asax 应用程序错误捕获，也尝试了 AsyncFileUpload 内置的错误捕获。 似乎 global.asax 可以捕获特定错误，但无法优雅地抛出它。 因此，我最终使用了警告 UI 和 web.config 中的 <httpRuntime maxRequestLength="500"/>。 这并不完美，但适用于所有主要浏览器。

另一个需要注意的事项：该解决方案也可以在最新的 IE9 RC 下运行，但是您必须在 IE8 兼容模式下运行它。

总结

所有代码均在主要浏览器下进行了测试：IE8/IE9 RC/Firefox 3.6/Chrome 9。 很高兴拥有这样一个内置控件来使用。

希望这对您的项目也有所帮助。