AsyncFileUpload 回发导致双重上传 [英] AsyncFileUpload postback causes double upload

问题描述

我在网页上实现了 AsyncFileUpload 控件.此网页要求上传的文件显示在 GridView 中.
GridView 包含以下列:文件名"、机密"复选框和删除"" 按钮删除上传的文件.

I implemented the AsyncFileUpload control on a web page. This web page requires uploaded files to appear in a GridView.
The GridView contains the following columns: "File Name", "Confidential" Check Box, and a "Remove" button to remove the uploaded file.

由于 AsyncFileUpload 回发不执行 整页 回发，我需要在 OnClientUploadComplete 事件上强制"回发AsyncFileUpload 控件，以便在上传文件后呈现 gridview.
在OnClientUploadCompleteEvent 中，我使用javascript 调用__doPostBack.在本次回发中，我只绑定了我的 GridView 并显示了文件信息(我没有重新保存文件).

Since the AsyncFileUpload postback does not do a full page postback, I need to "force" a postback on the OnClientUploadComplete event of the AsyncFileUpload control in order to render the gridview after uploading a file.
In the OnClientUploadCompleteEvent, I use javascript to call __doPostBack. In this postback, I only bind my GridView and display the file information (I don’t re-save the file).

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

The problem: On the AsyncFileUpload’s first "partial" postback, the file is successfully uploaded, as expected. On the second postback that I force with __doPostBack, the file is re-uploaded.
You can verify this by using Google Chrome, which displays the upload progress. The behaviour is as follows:
- After selecting the file, the progress increments from 0% to 100% and the file is uploaded.
- After this, the __doPostBack executes, and you can see the upload progress increment again from 0% to 100%.

如何确保 Gridview 已正确填充，但文件未上传两次?

How can I make sure the Gridview is properly populated, but that the file is not uploaded twice?

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

I attached a sample solution which contains the issue: https://www.yousendit.com/download/MzZFc2ZBNDRrYUN4dnc9PQ

推荐答案

也许丑陋，但有效:

1)在 asp:AsyncFileUpload AsyncFileUpload1 控件下方添加一个 css 隐藏的 asp:Button.

1) Add a css-hidden asp:Button bellow the asp:AsyncFileUpload AsyncFileUpload1 control.

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

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

2) On the Page_Load method, remove the if (Request.Params.Get("__EVENTTARGET") == "UploadPostback") and put its block in a simple else to the previous if.

3)在 AsyncFileUpload1_UploadedComplete 函数上，也删除 if (Request.Params.Get("__EVENTTARGET") != "UploadPostback") 行，但保留里面的所有内容.

3) On the AsyncFileUpload1_UploadedComplete function, also remove the if (Request.Params.Get("__EVENTTARGET") != "UploadPostback") line, but leave intact everything that was inside it.

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

4) Back to the aspx. Put a asp:UpdatePanel outside the grid GridView1.

<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 函数以使其触发回发.将其替换为以下内容:

5) The last step is to change the AjaxUploadComplete client-side javascript function to make it trigger the postback. Replace it with the following:

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

<小时>

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

---

Any file the user selects is uploaded only once.
All changes here are meant to be made in AjaxUpload.aspx & AjaxUpload.aspx.cs of your AjaxUpload.zip.

这篇关于AsyncFileUpload 回发导致双重上传的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！