Change jQuery progress bar image using jQuery in ASP.Net

Babloo22

SOLVED CLOSED ACTIVE ANSWERED
User: Babloo22
Posted: on Apr 19, 2017 11:38 AM
Forum: jQuery and jQuery Plugins
Answer: 2
Views: 6095
Sample Code: Download

This is the link https://ibb.co/e6L3Fk i have uploaded the image , now how do i change the progress bar with image or any othet

            var progressdiv = $('#progressbar');
            var progressbarlabel = $("#progressbar-text");

            $.ajax({
                url: "FileUploadHandler.ashx",
                type: "POST",
                data: formData,
                contentType: false,
                processData: false,
                success: function ()
                {
                    progressbarlabel.text("Complete");
                    progressdiv.fadeOut(3000);
                },
                error: function (err) {
                    alert(err.statusText)
                }
            });

            progressbarlabel.text("uploading");
            progressdiv.progressbar({value: false}).fadeIn(2000);

I have a generic handler , on uploading multiple files i will get a progress bar , how do i change the with new gif image or any other.

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 6

Reply
ANSWER
User: dharmendr
Replied: on Apr 20, 2017 09:54 AM
Modified: on Apr 20, 2017 09:57 AM
Report

Hi Babloo22,

Refer the below sample.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.12/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.12/themes/black-tie/jquery-ui.css" />
    <script type="text/javascript">
        $(function () {
            var progressbar = $("#progressbar").progressbar({ value: false });
            progressbar.progressbar().css('background-image', "url('https://static.flickr.com/66/199481236_dc98b5abb3_s.jpg') !important");
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div id="progressbar">
            <span class="text"></span>
        </div>
    </div>
    </form>
</body>
</html>

Demo

Babloo22

0 9

Reply
ANSWER
User: Babloo22
Replied: on Apr 29, 2017 04:00 AM
Report

well in place of this to change the progress bar

progressdiv.progressbar({value: false}).fadeIn(2000);

this can be added to change to another progress bars

progressdiv.circleProgress({value: false}).fadeIn(2000);

or the other way is add a div element hide ..add a image to the div element, and show it out side the ajax call and hide it in the succes of ajax.

<div style=" display:none; width:400px"  class="divelement" >
    <img src="img/images.gif"/>
</div>

                   $('.divelement').show();
                   $.ajax({
                    url: "FileUpload.ashx",
                    type: "POST",
                    data: formData,
                    contentType: false,
                    processData: false,
          
                    success: function ()
                    { 
                        $('.divelement').hide();                     
                        alert("Files Uploaded Successfully...");
                    },
                    error: function (err) {
                        alert(err.statusText)
                    }
                });

thats it we can add any images like gif png etc.

hope it helps

thanks.

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Change jQuery progress bar image using jQuery in ASP.Net

Company

Explore

Follow us

Contact Us