Javascript 使用jQuery上载文件时显示loading.gif

如何在使用jQuery上载文件时显示

load.gif

<input type="file" class="form-control" name="profilepic" id="profilepic" accept="image/*" required >
<div id="loader_img"></div>

<button type="submit" name="submit" id="submit" class="btn btn-primary"><span class="glyphicon glyphicon-check"></span> Save</button>

---

@Mehran Torki的意思是，您需要首先将要显示的加载程序放在请求之前，然后将其隐藏在成功回调中。这就是你的代码显示加载器的样子——注意注释

$(function() {
  $('form[name="chngimg"]').find('input,select,textarea').not('[type=submit]').jqBootstrapValidation({
    submitSuccess: function ($form, event) {
      //here - showing loader to the user
      $('#loader_img').show();
      $.ajax({
        type: "POST",
        url: "propicchng.php",
        data: $('form').serialize(),
        success: function(msg){
          //here - hiding when request is done
          $('#loader_img').hide();
          // just to confirm ajax submission
          $("#imgchng").modal('hide');
          alert(msg);
          $( '#chngimg-form' ).each(function(){
            this.reset();
          });},
        error: function(){
          alert("failure");
        }
      });
      event.preventDefault();
    }
  });
});

---

为什么

$（'#loader_img'）.show（）

位于

success

callback？我不擅长jquery

$(function() {
  $('form[name="chngimg"]').find('input,select,textarea').not('[type=submit]').jqBootstrapValidation({
    submitSuccess: function ($form, event) {
      //here - showing loader to the user
      $('#loader_img').show();
      $.ajax({
        type: "POST",
        url: "propicchng.php",
        data: $('form').serialize(),
        success: function(msg){
          //here - hiding when request is done
          $('#loader_img').hide();
          // just to confirm ajax submission
          $("#imgchng").modal('hide');
          alert(msg);
          $( '#chngimg-form' ).each(function(){
            this.reset();
          });},
        error: function(){
          alert("failure");
        }
      });
      event.preventDefault();
    }
  });
});