Question

我是js的新手。我试图加载modal，它有加载gif文件，但在chrome中它不起作用，它在Firefox中工作正常。

我上传图片比使用ajax调用。在Firefox中一切正常，但在chrome中没有任何作用。我想show()加载gif文件。

我试图解决这个问题，我得到了一个改变

的解决方案

async: false to true

在这种情况下代码也在chrome中工作......

但是当我change async = true时，它显示动画仅1秒，而hide显示modal，然后根据需要在几秒后重新加载页面。

我想要的只是hide modal直到ajax完成其处理。完成后重新加载页面，直到它show GIF动画。

如果我更改async = true chrome和firefox会在一秒内隐藏modal。

代码

    function submitProfileImage(text,formmodels) {
      $(document).ajaxStart(function(){
      $(".temp").show();
      });
     $(document).ajaxComplete(function(){
      $(".temp").hide();
      });
     uploadImage(text,formmodels);
     }
   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.");
      $('#myFilesModal').show();
      $('.temp').hide();
      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').show();
            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" data-toggle = "modal" data-backdrop="false" class="btn btn-primary" 
    onclick="submitProfileImage('imageFilesForm','myFilesModal');" value="Save"/>
  </div>
</div>

请提出你的建议......

注意： - async = false时，它在firefox中运行正常。

显示模态加载div不在chrome中工作

0 个答案: