Question

I have file upload using jquery form plugin as

$(function() {

        $("#Form").ajaxForm({
            iframe: true,
            dataType: "json",
            url: "Upload/Index",
            success: function(result) {
                $('#MyGrid').append('<tr><td><a href="#">result</a></td></tr>');

            },
            beforeSubmit: function() {

            },
            error: function(response) {
                alert('error');
            }
        });
    });

and my form as

<form id="Form" method="post" enctype="multipart/form-data">
<br />
    <input type="file" name="addedFile" id="addedFile"  />
    <br />
<input type="submit" id="submit" value="submit" runat="server" />
</form>

Now i want to show loading gif image from user clicks submit button to till i get result to success function. how can i do that .

thanks,

michaeld

Answer 1

You can just insert an img element into the DOM (I assume this would go in the beforeSubmit function):

// doesn't have to be added to the body;
// wherever you want it is cool
$('<img id="loadingGif" src="path/load.gif" />').appendTo('body');

Then you can just use CSS to position it absolutely or whatever else you’d like to do.

Then, on error or success, you can remove the image:

$('#loadingGif').remove();

You could make it a little more efficient by only building the element once, and then simply adding/removing from the DOM, but this is a basic start.