UpdatePanel 中的 FileUpload 控件而不刷新整个页面？答案

【问题标题】：FileUpload control inside an UpdatePanel without refreshing the whole page?UpdatePanel 中的 FileUpload 控件而不刷新整个页面？
【发布时间】：2010-09-07 08:04:57
【问题描述】：

根据Microsoft，FileUpload 控件与 AJAX UpdatePanel 不兼容。

我知道 PostBackTrigger 可以像这样添加到表单的提交按钮中：

<Triggers>
  <asp:PostBackTrigger ControlID="Button1" />
</Triggers>

问题在于，这会强制表单执行完整的回发，这首先会消除使用 UpdatePanel 的全部意义。是否有解决此问题不会导致整个页面刷新的解决方法？

【问题讨论】：

标签： .net asp.net asp.net-ajax file-upload updatepanel

【解决方案1】：

我知道可以做到这一点的第三方组件。它被称为"swfupload"，可以免费使用和开源，并使用 javascript 和 flash 来创造奇迹。

以下是他们提供的功能列表：（来自他们的网站）

在对话框中通过 ctrl/shift-selecting 一次上传多个文件

所有事件的 Javascript 回调

开始上传前获取文件信息

使用 XHTML 和 css 样式上传元素

使用 HTML 上传文件时显示信息

无需重新加载页面

适用于所有支持 Flash 的平台/浏览器。

如果使用 Flash 或 javascript，则优雅地降级为正常的 HTML 上传表单不可用

开始上传前控制文件大小

仅在对话框中显示选定的文件类型

队列上传，开始上传前删除/添加文件

他们还有一个demo area，您可以在其中玩弄他们的控制权。这样您就可以确保它正是您想要的。

我们在我们的一个项目中使用了它，到目前为止它从未让我们失望过，所以我认为这是一个安全的选择。

哦，这里是下载页面：http://code.google.com/p/swfupload/

【讨论】：

【解决方案2】：

您不能仅通过重新加载整个 HTML 文档来通过 AJAX 上传文件。如果您更喜欢纯 HTML（这更常见，例如由 WordPress 使用）或其他类似 Sven 建议的 swfupload，则应该使用 iframes。

【讨论】：

【解决方案3】：

将此添加到您的按钮控件：

OnClientClick="javascript:document.forms[0].encoding = 'multipart/form-data';"

-或-

让你的页面表单标签看起来像：

<form id="form1" runat="server" enctype="multipart/form-data">

【讨论】：

我试过了 - 我的 FileUpload 控件仍然为 .HasFile 属性返回 False。

【解决方案4】：

前几天我遇到同样的问题时发现了这个：http://vinayakshrestha.wordpress.com/2007/03/13/uploading-files-using-aspnet-ajax-extensions/。

对于我的实现，我将 iframe 放在模式弹出窗口中，并添加了一个带有 style="display:none" 的按钮来处理弹出窗口的关闭。在监视 iframe 变化的 javascript 函数中，我添加了 document.getElementById("").click();隐藏按钮。

【讨论】：

【解决方案5】：

试试 AJAX AsyncFileUpload。如果用于它打算使用的事情（处理 UploadedComplete 事件），它会很好地工作。

http://www.asp.net/AJAX/AjaxControlToolkit/Samples/AsyncFileUpload/AsyncFileUpload.aspx

【讨论】：

我不知道这是否是我的特定情况，但是当 .HasFile 在更新面板内时，这也会为我返回 false。我的解决方法是使用触发器标记来排除它，就像最重要的问题一样，但仍然使用 AsyncFileUpload 控件（这可能会消除异步性质）。这是一个 mojoPortal 网站。

【解决方案6】：

可以使用 IFrame 具有提到 FileUpload 页面的“目标”属性或在链接中使用 Jquery 示例 How to make Asynchronous(AJAX) File Upload using iframe?

【讨论】：

【解决方案7】：

触发上传事件的按钮需要将UseSubmitBehavior属性设置为false：

clsUploadButton.UseSubmitBehavior = False;

【讨论】：