Javascript ajax调用未显示上载图像

我正在上传一个文件，当我点击upload时，我想显示一个图像，直到ajax调用没有发送响应为止

这是我的密码-：

    $(function() {
    $('#upload-file-btn').click(function(e) {
        if ($('#uploading').css('visibility') == 'hidden') {
            $('#uploading').css('visibility','visible');
        }
        e.preventDefault();
        var form_data = new FormData($('#upload-file')[0]);

        $.ajax({
            type: 'POST',
            url: '/uploadCSV',
            data: form_data,
            contentType: false,
            cache: false,
            processData: false,
            async: false,
            success: function(data) {

                if (data.errorMsg){
                    alert(data.errorMsg);
                    if ($('#uploading').css('visibility') == 'visible') {
                       $('#uploading').css('visibility','hidden');
                    }
                    return;
                }
                if ($('#uploading').css('visibility') == 'visible') {
                    $('#uploading').css('visibility','hidden');
                }
                $("#add-new").remove();
                $(".panel-close").remove();

                var formLists = data.formList;
                populateFormDict = data.populateFormDict;
                console.log(formLists);
                console.log(populateFormDict);

                for (var i in formLists) {
                    var context = "#offer-panel-"+(parseInt(i)+1);
                    var inputContext = "input#panel-"+(parseInt(i)+1);
                    $(context).show();
                    $(inputContext).val('on');
                    $("#formatLevel", context).html(formLists[i].format_level);
                    $("#bu", context).empty();
                    $('#bu', context).html(formLists[i].bu);
                    $('#bu option', context).prop('selected', true);
                    $("#bu option:selected", context).attr('disabled',true)
                    $("#bu", context).multiselect({
                        noneSelectedText: 'Select Options',
                        selectedList: 1,
                        create: function(event, ui) {
                            created_2 = event.timeStamp;
                        },
                        beforeopen: function(event, ui) {},
                        open: function(event, ui) {},
                        close: function(event, ui) {
                            categories = $("#bu", context).val();
                            console.log(categories);
                        },
                        checkall: function(event, ui) {
                            checkall_2 = event.timeStamp - created_2;
                            console.info("time :" + checkall_2);
                        }
                    }).multiselectfilter().multiselect("enable");
                    $("#bu", context).multiselect("refresh");
                }
            },
        });
    });
});

这个的html是-：

<img src="../static/img/uploading.jpg" id="uploading" style="display:none; margin: 0; padding:0; top:0; left:0; width: 100%;
height: 100%; background:rgba(255,255,255,0.5); width: 100px; position:fixed; " />

当我点击上传按钮时，图像就不显示了。上载文件的表单为-：

<form class="form-inline" method="post" enctype="multipart/form-data" id="upload-file">
        <div class="col-md-6 form-group">
            <input type="file" name="offersFile" class="form-control col-md-4" id="fileInput" >
        </div>
        <button id="upload-file-btn" type="submit" class="btn btn-default">Upload</button>
    </form>

上传

---

我无法理解错误在哪里。

既然可以使用jquery的

show（）

函数，为什么还要使用css属性

  $('#uploading').show();

例如：

最佳方式

if (! $('#uploading').is(":visible")){
   $('#uploading').show();
}

and

if ($('#uploading').is(":visible")){
   $('#uploading').hide();
}

---

既然可以使用jquery的

show（）

函数，为什么还要使用css属性呢

  $('#uploading').show();

例如：

最佳方式

if (! $('#uploading').is(":visible")){
   $('#uploading').show();
}

and

if ($('#uploading').is(":visible")){
   $('#uploading').hide();
}

---

您混合了可见性和显示属性，它们是不同的。试试这个：

if (!$('#uploading').is(':visible')) {
  $('#uploading').show(); // or fadeIn/slideDown to animate the display of the image
}

---

您混合了可见性和显示属性，它们是不同的。试试这个：

if (!$('#uploading').is(':visible')) {
  $('#uploading').show(); // or fadeIn/slideDown to animate the display of the image
}

---

可见性

和

显示

是两个不同的CSS属性：

visibility CSS属性可以显示或隐藏元素，而无需 影响文档的布局（即为 元素（无论它们是否可见）。财产 也可以隐藏文件中的行或列

display CSS属性指定用于显示的渲染框的类型 元素。在HTML中，默认显示属性值取自 HTML规范中描述的行为或来自 浏览器/用户默认样式表。XML中的默认值为内联， 包括SVG元素。 除了许多不同的显示框类型外，值“无”还允许关闭元素的显示；当你不使用时， 所有子体元素的显示也已关闭。这个 文档被呈现为元素不存在于文档中 文档树

在html代码中，您正在设置display属性

<img src="../static/img/uploading.jpg" id="uploading" style="display:none; margin: 0; padding:0; top:0; left:0; width: 100%;
height: 100%; background:rgba(255,255,255,0.5); width: 100px; position:fixed; " />

这就是图像不显示的原因，因此您需要在这两个对象上使用相同的属性，例如将您的js更改为：

 if ($('#uploading').css('display') == 'none') {
        $('#uploading').css('display','block');
    }

或更好地使用：

  if ($('#uploading').is(':visible')) {
        $('#uploading').show();
    }

---

或者更好地使用两个不同的CSS属性：

visibility CSS属性可以显示或隐藏元素，而无需 影响文档的布局（即为 元素（无论它们是否可见）。财产 也可以隐藏文件中的行或列

display CSS属性指定用于显示的渲染框的类型 元素。在HTML中，默认显示属性值取自 HTML规范中描述的行为或来自 浏览器/用户默认样式表。XML中的默认值为内联， 包括SVG元素。 除了许多不同的显示框类型外，值“无”还允许关闭元素的显示；当你不使用时， 所有子体元素的显示也已关闭。这个 文档被呈现为元素不存在于文档中 文档树

在html代码中，您正在设置display属性

<img src="../static/img/uploading.jpg" id="uploading" style="display:none; margin: 0; padding:0; top:0; left:0; width: 100%;
height: 100%; background:rgba(255,255,255,0.5); width: 100px; position:fixed; " />

这就是图像不显示的原因，因此您需要在这两个对象上使用相同的属性，例如将您的js更改为：

 if ($('#uploading').css('display') == 'none') {
        $('#uploading').css('display','block');
    }

或更好地使用：

  if ($('#uploading').is(':visible')) {
        $('#uploading').show();
    }

---

或者，如果删除

条件，如果它起作用，那么最好使用@user7519395？图像显示为@user7519395，如果删除
条件，它是否工作？是否显示图像？