異步實現文件上傳控制時，UpdateProgress和觸發器部分在“更新”面板中不起作用

Question

我正在嘗試使用更新面板中的asp.net文件上載控件上載圖像文件。 我想處理UpdateProgress以顯示進度條圖像，該進度條圖像指示進度以及文件上傳。

情況1：當我刪除觸發器部分並使用UpdateProgress部分時，進度過程運行正常，但文件上傳控件無法上傳我的文件。 [ 頁面未重新加載 ]

情況2：當我使用觸發器部分並刪除UpdateProgress部分時，文件被上傳，但頁面被重新加載。

預期：我真正想要的是一個很好的文件上傳過程，該過程包括UpdateProgress以顯示進度圖像，並且嚴格沒有頁面加載。

我去過的是：

.aspx部分

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>


<asp:UpdateProgress ID="loading" runat="server">

<ProgressTemplate>

<asp:Image ID="Image1" CssClass="loadingGeneral" ImageUrl="../Images/loading(1).gif" AlternateText="Processing" runat="server" />

</ProgressTemplate>

  </asp:UpdateProgress>

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>

    <asp:FileUpload ID="fileUploadForAlbum" multiple="true" CssClass="buttonclass"  runat="server"  ToolTip="Click to browse image." />
    <asp:Button ID="btn_uploadAlbum" runat="server" class="buttonclass" OnClick="btnUploadAlbum_Click" Text="Upload Slider" />

    </ContentTemplate>
        <Triggers>
             <asp:PostBackTrigger ControlID="btn_uploadAlbum" />
        </Triggers>
        </asp:UpdatePanel>

.aspx.cs部分

文件上傳代碼部分很好，我已經使用下面的方法來實現進度條。

   protected void btnUploadAlbum_Click(object sender, EventArgs e)
{
            System.Threading.Thread.Sleep(2000);
            do something.........
}

提前致謝。 任何幫助表示贊賞。

Answer 1

關於FileUpload控件，有一些有趣的事實要知道。

1.）文件上傳控件不適用於異步回發。 它總是需要回發才能正常工作。 這就是您看到整頁回發的原因。

2.）AsyncPostbackTrigger在這里無法防止回發。

MSDN明確指出：

The FileUpload control is designed to be used only in postback scenarios 
and not in asynchronous postback scenarios during partial-page rendering.
When you use a FileUpload control inside an UpdatePanel control, the file must
be uploaded by using a control that is a PostBackTrigger object for the panel

這使得我們可以推斷出第三點：

3.）我們需要使用PostBackTrigger來使FileUpload控件與UpdatePanel ，然后將進行整頁的回發。

您的問題 ：

What I really want is a fine file upload process that includes UpdateProgress 
to show progress image and strictly with no page loads

對此的好答案之一是使用AsyncFileUpload控件。 此控件的功能：

• 它在更新面板中起作用
• 您可以使用ThrobberID屬性在文件上傳過程中顯示加載圖像。
• 它上傳文件而沒有任何回發
• 它提供客戶端和服務器端事件
• 有多種顏色選項可用於顯示文件上傳。 例如，如果上傳成功，則顯示綠色：使用CompleteBackColor屬性，如果上傳失敗，則使用ErrorBackColor屬性顯示紅色。

在.aspx頁面上，放置一個腳本管理器並注冊Ajax控件工具包DLL。

<%@ Register Assembly="AjaxControlToolkit" 
    Namespace="AjaxControlToolkit" TagPrefix="ajaxasyncFU" %>

現在放置AsyncFileUpload控件：

<ajaxasyncFU:AsyncFileUpload ID="AsyncFileUpload1" runat="server" 
OnClientUploadError="uploadError" OnClientUploadStarted="StartUpload" 
OnClientUploadComplete="UploadComplete" 
CompleteBackColor="Lime" UploaderStyle="Modern" 
ErrorBackColor="Red" ThrobberID="Throbber" 
onuploadedcomplete="AsyncFileUpload1_UploadedComplete" 
UploadingBackColor="#66CCFF" />

您可以使用3個客戶端事件： OnClientUploadError ， OnClientUploadStarted和OnClientUploadComplete

還有一個服務器端事件： onuploadedcomplete ，以異步方式調用，因此避免了整個頁面的回發。 通常在此服務器事件中，我們保存文件：

protected void AsyncFileUpload1_UploadedComplete
    (object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
{      
  if (AsyncFileUpload1.HasFile)
  {
    string strPath = MapPath("~/MyImages/") + Path.GetFileName(e.filename);
    AsyncFileUpload1.SaveAs(strPath);
  }
}

檢查以下2個鏈接： Link1 ， Link2以進一步閱讀。