Question

我有一个通过Ajax上传照片的表单，当您启动请求并且工作正常时，状态栏会出现。问题是当请求结束时，栏保持活动状态并显示缩略图照片。如果另外提出请求，该栏应重新出现。

我想在请求完成时隐藏栏，并尝试了几件事，但没有一件工作，这是我的代码：

   //jQuery Ajax to Post form data
   $.ajax({
    url : post_url,
    type: "POST",
    data : form_data,
    contentType: false,
    cache: false,
    processData:false,
    xhr: function(){
     //upload Progress
     var xhr = $.ajaxSettings.xhr();
     if (xhr.upload) {
      xhr.upload.addEventListener('progress', function(event) {
       var percent = 0;
       var position = event.loaded || event.position;
       var total = event.total;
       if (event.lengthComputable) {
        percent = Math.ceil(position / total * 100);
       }
       //update progressbar
       $(progress_bar_id + " .progress-bar").css("width", + percent +"%");
       $(progress_bar_id + " .status").text(percent +"%");
      }, true);
     }
     return xhr;
    },
    mimeType:"multipart/form-data"
   }).done(function(res){ //
    $(my_form_id)[0].reset(); //reset form
    $(result_output).html(res); //output response from server
    submit_btn.val("Enviar").prop( "disabled", false); //enable submit button once ajax is done
   });

这是显示进度条的HTML代码：

<div id="progress-wrp">
 <div class="progress-bar"></div>
</div>

Answer 1

你尝试了什么？你在done（）方法的底部尝试了hide（）吗？（这也是在发出请求时显示（））

$("#progress-wrp").show();使用jquery通过它的id获取元素并显示它（在这种情况下，当请求开始时）。

$("#progress-wrp").hide();使用jquery通过它的id获取元素并隐藏它（在这种情况下，当请求完成时（））。

xhr: function(){
     //upload Progress
     $("#progress-wrp").show();
     var xhr = $.ajaxSettings.xhr();
     if (xhr.upload) {
      xhr.upload.addEventListener('progress', function(event) {
       var percent = 0;
       var position = event.loaded || event.position;
       var total = event.total;
       if (event.lengthComputable) {
        percent = Math.ceil(position / total * 100);
       }
       //update progressbar
       $(progress_bar_id + " .progress-bar").css("width", + percent +"%");
       $(progress_bar_id + " .status").text(percent +"%");
      }, true);
     }
     return xhr;
    },
    mimeType:"multipart/form-data"

    .done(function(res){ //
        $(my_form_id)[0].reset(); //reset form
        $(result_output).html(res); //output response from server
        submit_btn.val("Enviar").prop( "disabled", false); //enable submit button once ajax is done
       $("#progress-wrp").hide();
       });

在Ajax请求开始和结束时显示和隐藏元素（状态栏）

1 个答案: