AsyncFileUpload 回发导致双重上传答案

【问题标题】：AsyncFileUpload postback causes double uploadAsyncFileUpload 回发导致双重上传
【发布时间】：2011-06-28 10:20:32
【问题描述】：

我在网页上实现了AsyncFileUpload 控件。此网页要求上传的文件出现在GridView。
GridView 包含以下列：“文件名”、“机密”复选框和“删除”按钮以删除上传的文件。

由于AsyncFileUpload 回发不执行整页回发，我需要在 AsyncFileUpload 控件的OnClientUploadComplete 事件上“强制”回发，以便在上传后呈现网格视图一个文件。
在OnClientUploadCompleteEvent中，我使用javascript调用__doPostBack。在这个回发中，我只绑定了我的 GridView 并显示了文件信息（我没有重新保存文件）。

问题：在AsyncFileUpload的第一次“部分”回传中，文件按预期成功上传。在我使用__doPostBack 强制进行的第二次回发时，文件被重新上传。
您可以使用显示上传进度的 Google Chrome 来验证这一点。行为如下：
- 选择文件后，进度从 0% 增加到 100% 并上传文件。
- 此后，__doPostBack 执行，您可以看到上传进度再次从 0% 增加到 100%。

如何确保正确填充了 Gridview，但文件没有上传两次？

我附上了一个包含问题的示例解决方案：https://www.yousendit.com/download/MzZFc2ZBNDRrYUN4dnc9PQ

【问题讨论】：

请帮助我@user619814：stackoverflow.com/questions/18682909/…

标签： c# asp.net ajax gridview asyncfileupload

【解决方案1】：

也许丑陋，但有效：

1) 在 asp:AsyncFileUpload AsyncFileUpload1 控件下方添加一个 css-hidden asp:Button。

<asp:Button runat="server" ID="btnClick" Text="Update grid" style="display:none"/>

2) 在Page_Load 方法上，删除if (Request.Params.Get("__EVENTTARGET") == "UploadPostback") 并将其块放入一个简单的else 到之前的if。

3) 在 AsyncFileUpload1_UploadedComplete 函数上，还要删除 if (Request.Params.Get("__EVENTTARGET") != "UploadPostback") 行，但保留其中的所有内容。

4) 回到aspx。在网格GridView1外放一个asp:UpdatePanel。

<asp:UpdatePanel runat="server" UpdateMode="Conditional">
     <Triggers>
         <asp:AsyncPostBackTrigger ControlID="btnClick" EventName="Click" />
     </Triggers>
     <ContentTemplate>

     <asp:GridView ID="GridView1" ...
     YOUR GRID CODE REMAINS THE SAME
     </asp:GridView>

    </ContentTemplate>
</asp:UpdatePanel>

5) 最后一步是更改AjaxUploadComplete 客户端javascript 函数以使其触发回发。将其替换为以下内容：

function AjaxUploadComplete() {
    var btnClick = document.getElementById("btnClick");
    btnClick.click();
}

用户选择的任何文件都只会上传一次。
此处的所有更改均应在 AjaxUpload.zip 的 AjaxUpload.aspx 和 AjaxUpload.aspx.cs 中进行。

【讨论】：

这不是我为完成这种行为而编写的代码，但我做了尽可能少的更改，以便实现您的目标。
感谢 tiagoinu，您的解决方案完成了这项工作。你摇滚！
请帮帮我@tiagoinu：stackoverflow.com/questions/18682909/…

【解决方案2】：

我无权访问包含该问题的示例解决方案，但我在使用 AsyncFileUpload 组件的项目中也遇到了双重回发。我找到了一个非常简单的解决方法：

只需添加：

private bool justUploaded = false;

然后：

void AsyncFileUpload1_UploadedComplete(object sender, AsyncFileUploadEventArgs e)
{
    if (justUploaded) return;
    justUploaded = true;
    // rest of your upload code
}

【讨论】：

【解决方案3】：

有一个更简单的解决方案

@@t0x1n3Himself 你给出的解决方案很简单，但不起作用

在 AsyncFileUpload 周围加上一个更新面板，将其命名为 UpdatePanelAFU 然后在 UpdatePanelAFU 中执行以下操作：

 protected void AsyncFileUpload_UpdatePanelAFU(object sender,AjaxControlToolkit.AsyncFileUploadEventArgs e)
{

    if (Request.Params.Get("__EVENTTARGET") != "UpdatePanelAFU")
        return;
..... rest of the code 
}

享受吧！

【讨论】：

【解决方案4】：

我发现这是一个更优雅的解决方案，在这里找到：http://forums.asp.net/t/1951566.aspx?AsyncFileUpload+uploads+twice) 但下面是我修改后的完整工作代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>AsyncFileUpload Example</title>
    <script type = "text/javascript">
        function uploadComplete(sender) {
            $get("<%=lblMesg.ClientID%>").innerHTML = "File Uploaded Successfully";
            clearContents();
        }


        function uploadError(sender) {
            $get("<%=lblMesg.ClientID%>").innerHTML = "File upload failed.";
            clearContents();
        }


    function clearContents() {
            var span = $get("<%=AsyncFileUpload1.ClientID%>");
            var txts = span.getElementsByTagName("input");
            for (var i = 0; i < txts.length; i++) {
                if (txts[i].type == "text") {
                    txts[i].value = "";
                }
                if (txts[i].type == "file") {
                    txts[i].value = "";
                }
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <cc1:AsyncFileUpload OnClientUploadError="uploadError"
            OnClientUploadComplete="uploadComplete" runat="server"
            ID="AsyncFileUpload1" Width="400px" UploaderStyle="Modern" EnableViewState = "false"
            UploadingBackColor="#CCFFFF"  ThrobberID="imgLoader" OnUploadedComplete = "FileUploadComplete"
          />
        <asp:Image ID="imgLoader" runat="server" ImageUrl = "~/images/loader.gif" />
        <br />
       <asp:Label ID="lblMesg" runat="server" Text=""></asp:Label>






    </form>
</body>
</html>

【讨论】：

【解决方案5】：

AsyncFileUpload 有一个名为 IsUploading 的属性。当此属性设置为 false 时，将发生 postback。你可以像这样检查这个属性：

if(AsyncFileUpload1.IsUploading)
 {
  ..... upload codes
 }

【讨论】：

【解决方案6】：

我相信@Veera 是对的。上传文件时多次调用 UploadComplete。以下对我有用。

void AsyncFileUpload1_UploadedComplete(object sender, AsyncFileUploadEventArgs e) {
    if (AsyncFileUpload1.IsUploading) return;
    // rest of your upload code
}

【讨论】：

这里有点晚了，但我遇到了同样的问题并尝试使用 IsUploading，但我得到 AsyncFileUpload1.IsUploading 返回的“未定义”（假设控件 ID 是 AsyncFileUpload1，包装在 UpdatePanel 中）
确保您拥有 AsyncFileUpload 控件。您可能没有获得对控件的引用，并且它是 NULL（什么都没有）。