发布jsp时显示动画gif

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> 

当我单击提交按钮时，该页面应该显示gif图像，但什么也不显示。

Answer 1

使用jQuery提交HTML表单很容易，但是使用文件上传（multipart / form-data）提交HTML表单并不简单。

在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

在支持旧版浏览器中，您也可以通过提交隐藏的iframe使用一种技术。

有关更多信息，请参见此详细教程。