Question

For the following scenario:

I have an ASP.NET FileUpload control and a Button that postbacks for uploading the selected file.

I would like to know if with javascript I can:

1. Start showing an image (loading image) when someone clicks on the button that excecutes the upload
2. Stop showing the image when the upload of the file is complete

Restrictions: I can’t use ajax in this case.

Answer 1

You could do something like this.

<asp:FileUpload ID="FileUpload" runat="server" />
<asp:Button ID="btnUpload" runat="server" Text="Upload" OnClientClick="DisplayWaiting()"/>
<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/waiting.jpg" style="display:none;" />

<script language="javascript">
function DisplayWaiting()
{
    var img = document.getElementById("Image1");
    img.style.display = 'block';
}
</script>

The image tag has its default display attribute set to none. When the upload button is clicked the DisplayWaiting() function is called toggling the display attribute to block, showing the image. After the page posts’ back the image tag is rendered with its display attribute set to none, hiding the image.