[UPDATE] For those who complain that my example is not working, it is most likely because you don’t know CSS very well. Here are things you need to check if you try to follow my example:
1. Do NOT use UpdatePanel
2. Make sure your image “src” is pointing to your loading gif file. You cannot just copy and paste my code and expect the image to show up
3. Add the following two CSS classes in your CSS file
/* uncomment the following two lines
to create a transparent layer
When you use ASP.NET FileUpload control to upload a large file, you should give your users some feedback, say “Uploading, please wait”, so your user will not sit there wondering if the upload is actually working or not. Naturally you may think of using AJAX UpdateProgress control to display such feedback message, but unfortunately it would not work. The reason is that you will have to use UpdatePanel in order to use UpdateProgress, but the UpdatePanel.control is not compatible with the FileUpload control, so you cannot use UpdateProgress to display feedback message when using the FileUpload control.
<asp:Panel ID="pnlBackGround" runat="server" CssClass="PopupBackground" Style="display: none;"> <div id="divFeedback" runat="server" class="Popup" style="text-align: center;"> <div class="div-clear"> </div> <img src="../../App_Themes/Default/Images/loading_animation.gif" alt="Loading" /> <div> Uploading file, please wait...</div> <div class="div-clear"> </div> </div> </asp:Panel>
this.hdnStatus.Value = "1";
Please feel free to post your comments or questions here, and I hope this helps someone.