Displaying animated gif when posting jsp

Question

I want to display an animated gif to show the status of loading a jsp page when posting to the server. Here is my code:

        <form id="form" name="form" action="symptom" method="post" enctype="multipart/form-data" onsubmit="return validateForm()">
            <input id="file" type="file" name="file" style="width: 470px; "/>
            <br><br>
            <input id="upload" type="submit" value="Upload" />                
        </form> 
        <br> <img src="img/loading.gif" id="loading" name="loading" style="display: none" height="42" width="42" > <br>
 <script>
        $.ajax({
        type: "POST",
        url: "symptom",
        data: {
            name: $("#form").val()
        },
        beforeSend:function(){
           $("#loading").show();
        },
        success:function(data){          
        },
        error:function(){
        }
    });
</script> 

When I click the submit button, the page was supposed to display the gif image but nothing is displayed.

Answer 1

Submitting an HTML form with jQuery is easy, but submitting an HTML Form with File uploads(multipart/form-data) is not straight forward.

In jQuery, there is no direct API submit a multipart/form-data form.

There are different techniques doing so:

For modern browsers supporting HTML5 you can use this code:

//Callback handler for form submit event
$("#form").submit(function(e)
{
    var formObj = $(this);
    var formURL = formObj.attr("action");
    var formData = new FormData(this);
    $.ajax({
        url: formURL,
        type: 'POST',
        data:  formData,
        mimeType:"multipart/form-data",
        contentType: false,
        cache: false,
        processData:false,
        beforeSend:function(){
            $("#loading").show();
        },
        success: function(data, textStatus, jqXHR)

        {
            $("#loading").hide();
        },
        error: function(jqXHR, textStatus, errorThrown) {}          
    });
    e.preventDefault(); //Prevent Default action. 
    e.unbind();
}); 
$("#form").submit(); //Submit the form

In supporting old browsers as well you can use a technique by submitting hidden iframes.

For more info you can see this detailed tutorial