Question

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

this.route.snapshot.data['name']

但没有任何作用。

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

    ajaxStart
    ajaxSend 
    beforeSend

}

和

    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
        });

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

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

    <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>

Answer 1

试试这个

.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 2

您的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();
    }

}

Answer 3

我不会再使用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});

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

3 个答案: