Show Progress Bar when uploading files using AJAX UpdateProgress

Question

User944339287 posted

hi guys.. i having difficulties to show progress bar when uploading files using AJAX UpdateProgress.

my progress bar is disappear even i have paste the following javascript. pls advise. TQ

<script type="text/javascript">
window.onsubmit = function () {
    if (Page_IsValid) {
        var updateProgress = $find("<%= UpdateProgress1.ClientID %>");
        window.setTimeout(function () {
            updateProgress.set_visible(true);
        }, 100);
    }
}
</script>

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
    <div class="modal">
        <div class="center">
            <img alt="" src="loader.gif" />
        </div>
    </div>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
    <div style="margin: 20px">
        <asp:FileUpload ID="FileUpload1" runat="server" />
        <br />
        <asp:Button ID="btnUpload" Text="Submit" runat="server" />
    </div>
</ContentTemplate>
<Triggers>
    <asp:PostBackTrigger ControlID="btnUpload" />
</Triggers>
</asp:UpdatePanel>

 

Answer 1

User2103319870 posted

kengkit

my progress bar is disappear even i have paste the following javascript. pls advise. TQ

If possible you can try using AjaxFileUpload Control from AjaxControlToolkit. This have inbuilt progress bar while uploading files

Answer 2

User1724605321 posted

Hi kengkit,

You could also try to use some Jquery uploading plugins with inbuilt progress bar .For example , clike here for a demo .

Best Regards,

Nan Yu