[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1456
  • Last Modified:

asp:fileupload show gif when uploading

I want to show an animated gif when uploading files using the asp:FileUpload control. I use an asp:Literal control (litStatus) to show status messages if files not accepted and so on..

I thougt it would be nice to use the same control to show an animated gif while the image is uploading. The problem is that the gif will not be displayed. If I use exactly the same code but replace the gif with an text the text is displayed while the image is uploading. Do you know why the image is invisible, but not when using text?

Please see attaced code.
<script type="text/JavaScript">
    function ShowStatus(message) {
        if (message=='')
        {
            document.getElementById('status').innerHTML = 'Default message here';
        }
        else if (message=='loading')
        {
            document.getElementById('status').innerHTML = '<img src=\"/Media/Images/Misc/Loading.gif\" />';
        }
        else 
        {
            document.getElementById('status').innerHTML = message;
        }
    } 
</script>


<asp:FileUpload ID="FileUpload" runat="server" onclick="ShowStatus('')" /><br /><br />
<asp:Button ID="btnUploadImage" runat="server" Text="Lagre" OnClick="btnUploadImage_Click" OnClientClick="ShowStatus('loading')" />
<asp:Literal runat="server" ID="litStatus" />




protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        this.litStatus.Text = "<span id=\"status\"></span>";
        Page.ClientScript.RegisterStartupScript(this.GetType(), "Status", "ShowStatus('')", true);
    }
}



-------------
Notice
-------------

If I replace this javascript line:

document.getElementById('status').innerHTML = '<img src=\"/Media/Images/Misc/Loading.gif\" />';


whith this line:


document.getElementById('status').innerHTML = 'Please wait';


the "Please wait" text is shown while uploaing the image!! The "Loading.gif" does not work, why?

Open in new window

0
webressurs
Asked:
webressurs
  • 2
1 Solution
 
leakim971PluritechnicianCommented:
<script type="text/JavaScript">
    function ShowStatus(message) {
        if (message=='')
        {
            document.getElementById('status').innerHTML = 'Default message here';
        }
        else if (message=='loading')
        {
            document.getElementById('loading').style.display = 'block'; // block to display the image
        }
        else
        {
            document.getElementById('status').innerHTML = message;
        }
    }
</script>

<img id="loading" src="/Media/Images/Misc/Loading.gif" style="display:none;left:100px;top:100px;position:absolute;" />
<asp:FileUpload ID="FileUpload" runat="server" onclick="ShowStatus('')" /><br /><br />
<asp:Button ID="btnUploadImage" runat="server" Text="Lagre" OnClick="btnUploadImage_Click" OnClientClick="ShowStatus('loading')" />
<asp:Literal runat="server" ID="litStatus" />

to hide the image, use : document.getElementById('loading').style.display = 'none';
0
 
webressursAuthor Commented:
Works perfect, thank you :-)
0
 
webressursAuthor Commented:
There is one problem here, in Internet Explorer the gif animation don't work. I have read that this is because of a IE bug, and the solution is to preload the image with javascript. I don't know how to fix this...
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now