Отображение анимированного gif при публикации jsp

Question

Я хочу отобразить анимированный gif, чтобы показать статус загрузки jsp-страницы при отправке на сервер. Вот мой код:

 <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> 

При нажатии на кнопку отправки, страница должна была отобразить рисунок, но ничего не отображается.

Answer 1

Отправка HTML-формы с помощью jQuery проста, но отправка HTML-формы с загрузкой файлов (multipart/form-data) не является прямой.

В jQuery нет прямого API представить форму multipart/form-data.

Существуют различные методы делают так:

Для современных браузеров, поддерживающих HTML5 вы можете использовать этот код:

//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 

В поддержку старых браузеров, а также вы можете использовать технику, представив скрытые фреймы.

Для получения дополнительной информации вы можете увидеть это detailed tutorial