异步实现文件上传控制时，UpdateProgress和触发器部分在“更新”面板中不起作用

Question

I am trying to upload image files with asp.net file upload control inside an update panel. I want to process UpdateProgress to show a progress bar image indicating a progress as well along with the file upload.

Case 1: When I remove the trigger section and use UpdateProgress section, the progress procedure is working fine but the file upload control fails to upload my files. [ The page doesnot reload ]

Case 2: When I use trigger section and remove UpdateProgress section, the file gets uploaded but the page gets reloaded.

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

What I have been to is:

.aspx section

<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 section

File upload code section is fine and I have used following to implement progress bar.

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

Thanks in advance. Any help is appreciated.

Answer 1

There are some interesting facts to know about FileUpload control.

1.) file upload control doesn't work with asynchronous postback. It always needs a postback to work properly. This is the reason why you see full page postbacks.

2.) AsyncPostbackTrigger will not help here to prevent postback.

MSDN says clearly that:

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

This makes to infer our third point:

3.) We need to use PostBackTrigger to make the FileUpload control work with UpdatePanel , which is then going to have a full page postback.

Your Question :

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

One of the good answer to this is to use the AsyncFileUpload control. Features of this control:

• It works within the Update Panel
• You can show the loading image while file uploading is in progress, using ThrobberID property.
• It uploads the file without any postback
• It provides Client Side and Server side events
• There are different coloring options for showing file upload. As for example, it shows green color if upload is successful: Use the CompleteBackColor property, otherwise it shows red if there is unsuccessful upload, using ErrorBackColor property.

On your .aspx page, place a script manager and register the Ajax control toolkit DLL.

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

Now place the AsyncFileUpload control:

<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" />

There are 3 client events you can use: OnClientUploadError , OnClientUploadStarted , and OnClientUploadComplete

And one Server side event: onuploadedcomplete , which is called in asynchronous manner thus avoiding full page postback. In this server event usually we save the file:

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

Check these 2 links: Link1 , Link2 for further reading.