我想在 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

我不会再使用 Success 和 Error，因为现在有更好的方法可以做到这一点，而且你总有一天不会陷入 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});

Answer 2

试试这个

.loading {
        width: 100%;
        height: 100%;
        top: 0px;
        left: 0px;
        position: fixed;
        display: block;
        opacity: 0.7;
        background-color: #fff;
        z-index: 99;
        text-align: center;
    } 

    $body = $("body");
        $(document).on({
            ajaxStart: function () { if (!$body.hasClass('loading')) { $body.addClass("loading"); } },
            ajaxStop: function () { if ($body.hasClass('loading')) { $body.removeClass("loading"); } }
        });

Answer 3

您的 HTML 按钮无效， 输入按钮不能有href attr，要么去掉href attr，要么做一个超链接

** 代码：**

<input type="button" data-dismiss="modal" class="btn btn-primary" onclick="uploadImage('imageFilesForm','myFilesModal');" value="Save"/>

function uploadImage(text, formmodels) {
    var file = document.getElementById('profile_pic').files[0];
    if ($('#profile_pic').val() != "") {

        if (file && file.size < 1048576) {

            $(".temp").show();

            var formData = new FormData($('form.' + text)[0]);
            $.ajax({
                url: "url",
                type: "POST",
                data: formData,
                enctype: "multipart/form-data",
                contentType: false,
                cache: false,
                success: onSuccessFunction,
                error: onErrorFunction
                processData: false,
            });
        } else {
            alert("Your file size is too big.Please upload files upto 1 MB.");
            $(".temp").hide();
        }
    } else {
        alert('Please select the file you want to upload.');
        $(".temp").hide();
    }

    function onSuccessFunction(response) {
        alert(response);
        $(".temp").hide();
    }

    function onErrorFunction(response) {
        alert(response);
        $(".temp").hide();
    }

}