Обратная передача AsyncFileUpload вызывает двойную загрузку - PullRequest
5 голосов
/ 16 февраля 2011

Я реализовал элемент управления AsyncFileUpload на веб-странице.Эта веб-страница требует, чтобы загруженные файлы отображались в GridView.
. GridView содержит следующие столбцы: « Имя файла », « Конфиденциально » икнопку « Remove » для удаления загруженного файла.

Поскольку обратная передача AsyncFileUpload не выполняет обратную передачу full page , мне нужно «принудительно» выполнить обратную передачу на событие OnClientUploadComplete элемента управления AsyncFileUpload для визуализации gridviewпосле загрузки файла.
В OnClientUploadCompleteEvent я использую javascript для вызова __doPostBack.В этой обратной передаче я только связываю свой GridView и отображаю информацию о файле (я не сохраняю файл повторно).

Проблема: На первой «частичной» обратной передаче AsyncFileUploadфайл успешно загружен, как и ожидалось.При второй обратной передаче, которую я нажимаю __doPostBack, файл загружается повторно.
Это можно проверить с помощью Google Chrome, который отображает ход загрузки.Поведение выглядит следующим образом:
- После выбора файла прогресс увеличивается с 0% до 100%, и файл загружается.
- После этого выполняется __doPostBack, и вы можете видеть ход загрузкиснова увеличить с 0% до 100%.

Как я могу убедиться, что Gridview заполнен правильно, но что файл загружен не дважды?

Я приложил образец решения, в котором содержится проблема: https://www.yousendit.com/download/MzZFc2ZBNDRrYUN4dnc9PQ

Ответы [ 6 ]

3 голосов
/ 10 февраля 2014

Есть более простое решение

@@ t0x1n3 Само решение, которое вы дали, очень простое, но не работает

окружите AsyncFileUpload именем панели обновлений UpdatePanelAFU затем в UpdatePanelAFU сделайте следующее:

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

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

наслаждаться!

2 голосов
/ 17 февраля 2011

Может быть некрасиво, но работает:


1) Добавить скрытую css asp: кнопку ниже элемента asp: AsyncFileUpload AsyncFileUpload1.

<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.Поместите asp: UpdatePanel за пределы сетки 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) Последний шаг - изменить функцию javascript AjaxUploadComplete на стороне клиента, чтобы она запускала обратную передачу.Замените его следующим:

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

Любой файл, выбранный пользователем, загружается только один раз.
Все изменения здесь должны быть внесены в AjaxUpload.aspx & AjaxUpload.aspx.cs ofваш AjaxUpload.zip.

1 голос
/ 11 апреля 2015

Полагаю, @Вира правильно поняла.UploadComplete вызывался несколько раз во время загрузки файла.У меня сработало следующее.

void AsyncFileUpload1_UploadedComplete(object sender, AsyncFileUploadEventArgs e) {
    if (AsyncFileUpload1.IsUploading) return;
    // rest of your upload code
}
0 голосов
/ 19 ноября 2014

AsyncFileUpload имеет свойство с именем IsUploading. если для этого свойства установлено значение false, postback произойдет. Вы можете проверить это свойство так:

if(AsyncFileUpload1.IsUploading)
 {
  ..... upload codes
 }
0 голосов
/ 27 мая 2014

Я считаю это более элегантным решением, найденным здесь: 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>
0 голосов
/ 16 мая 2013

У меня нет доступа к вашему примеру решения, которое содержит проблему, но я также столкнулся с двойной обратной передачей в моем проекте с компонентом AsyncFileUpload.Я нашел очень простой обходной путь:

Просто добавьте:

private bool justUploaded = false;

Тогда:

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