Run script in background of GIF upload progress

Question

I want this effect on my website.

Main page shows an image link. When image is clicked, it hides the image and shows a GIF loading bar. I dont want it to be a genuine loading bar and just want to place a GIF file there. After script is run it should hide the gif image and show success message.

And i'm not uploading any picture I just want to run a php script while GIF image is shown. so please dont refer me to some article. I already searched alot. Please help

This is done through "ajax", or httprequest objects. Look up how to use those. — Matt H, Jan 11 '12 at 15:03
possible duplicate of [How to implement file upload progress bar on web?](http://stackoverflow.com/questions/49564/how-to-implement-file-upload-progress-bar-on-web) — Diodeus - James MacFarlane, Jan 11 '12 at 15:03
This is a quite broad question. The best thing is to give it a go yourself and then ask specific questions about roadblocks you run into. — T.J. Crowder, Jan 11 '12 at 15:04
Separately: Do you want the progress bar to be genuine progress, or just a "loading" indicator (spinning wheel, etc.)? It makes a big difference to the answer (the former is much harder than the latter). — T.J. Crowder, Jan 11 '12 at 15:05

score 0 · Answer 1 · answered Jan 11 '12 at 15:29

The jQuery library has some functions that would be a great help to accomplish what you want. Without jQuery, you can still do this, but jQuery will simplify the process.

Here is an example similar to what I use in my own code. Here, Script.php refers to the script on your server, original.gif refers to the image on your page, and loading.gif refers to the 'loading bar' gif image.

You'll need to load the jQuery library into the page to use this code.

$(document).ready(function() {
    $('#gifImage').click(gifImage_click);
    // Here, gifImage is the ID of the image you want to replace with a loading gif.
});

function gifImage_click() {
    // This will replace the gif image.
    $('#gifImage').attr('src','loading.gif');

    function successFunction(response) {
        // This function executes when the script runs successfully.
        $('#gifImage').attr('src','original.gif');
        alert('script completed successfully');
    }

    function errorFunction(xhr) {
        // This function executes when the script fails to execute.
        $('#gifImage').attr('src','original.gif');
        alert('script execution failed');
    } 

    $.ajax({
        type: "POST",
        url: "Script.php",
        success: successFunction,
        error: errorFunction
    }); // end - $.ajax
}

Run script in background of GIF upload progress

1 Answers1