發布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使用一種技術。

有關更多信息，請參見此詳細教程。