javascript - 我想在ajax处理时显示加载gif

Question

我是 JavaScript 新手。我想上传图像并使用“ajax”。虽然我的图像正在上传，但我想在图像加载和 ajax 处理时显示动画 gif 加载。我使用 if 循环来确定图像大小，如果图像大于 1 mb，则返回 false。当图像大于 1 mb 时，会显示动画 gif，但当图像小于 1 mb 时，则不显示任何内容。Ajax 成功函数和错误函数显示没有错误，并且在控制台中也没有错误。我几乎尝试了所有方法

    ajaxStart
    ajaxSend 
    beforeSend

但没有任何作用。

这是我使用的方法之一......我的ajax代码...

    function uploadImage(text,formmodels){
      var file = document.getElementById('profile_pic').files[0];
      if($('#profile_pic').val()==""){
      alert('Please select the file you want to upload.');
      return false;}
      if(file && file.size < 1048576) {
      } else {
      alert("Your file size is too big.Please upload files upto 1 MB.");
      return false;
      }       
      var formData = new FormData($('form.'+text)[0]);
         $.ajax({
         url: "<?= WEBSITE_URL ?>profile/submitProfileData",
         type: "POST",
         data:  formData,
         enctype:"multipart/form-data",
         contentType: false,
         cache: false,
         processData:false,
         beforeSend: function() {
            $(".temp").show();
         },
         success: function(data) {
            $(".temp").hide();
            if(data ==3) {alert("Maximum file size allowed is 1 MB.");
            }
            else if(data ==1) {alert("Please select lower size file. Your                                                               file size is max.");
            }
            else if(data ==2) {alert("Please select valid file type.");
            }
            else if(data =='Please enter the mandatory fields') {
                alert(data +"(*)");
            } else if (data ==4 ) { 
                         //$('#myFilesModal').modal('hide');
                         window.location="<?php
                                    echo WEBSITE_URL;
                                    ?>/profile/index/<?php
                                    echo Model::encryptURL($userid);
                                    ?>";

            }
        },
        error: function(jqXHR, textStatus, errorThrown){
            alert(jqXHR);
        },
        async:   false
        });  

}

和

    <div class="modal fade" id="myFilesModal" tabindex="-1" role="dialog"        aria-labelledby="myModalLabel" aria-hidden="true">
     <div class="modal-dialog">
      <div class="modal-content">
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal"><span aria-  hidden="true">&times;</span></button>
         <h4 class="modal-title" id="myModalLabel">Files</h4>
        </div>
       <form class="imageFilesForm" method="POST" enctype="multipart/form-data">
        <fieldset>
        <div class="modal-body">
            <ul class="nav nav-list">

                <li class="nav-header">File</li>
                <li><input type="file" id="profile_pic" name="profile_pic" data-bfi-disabled accept="image/*" /></li>
            </ul>
            <input type="hidden" name="form" id="forms" value="filesform" />
        </div>
        <div class="temp" style="display:none">
            <center><img src="<?= WEBSITE_URL ?>utilities/ajax-loader.gif" alt="Waiting..." /></center>
        </div>
    </fieldset>
  </form>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <input type="button" data-dismiss="modal" class="btn btn-primary" href=".temp1"
    onclick="uploadImage('imageFilesForm','myFilesModal');" value="Save"/>
  </div>
</div>

代码完全正常工作......它在控制台中没有显示任何错误，并且如果图像超过 1 mb 并且它显示动画 gif

如果代码有任何问题或有任何建议，请分享

Note:- It is a .tpl file

Note:- I just checked that my code is working in firefox but in chrome its not working.....

Answer 1

我不会再使用成功和错误，因为现在有更好的方法可以做到这一点，并且有一天您不会陷入 CallbackHell 中。我会尝试这个。

这样做的另一个好处是您不必使用 async: false。习惯异步编程需要一段时间，但这是值得的。

如果你总是让你的程序等待调用完成，你最终会得到一个非常慢的应用程序。

var ajCall = $.ajax({yourAjax});

[Stuff to do while loading]

ajCall.done(function(){stuff to do when ajaxCall was sucessfully finished});
ajCall.fail(function(){stuff to do when your ajaxCall fails for some reason});