ajax调用未显示上传图像

Question

我正在上传一个文件，当我点击上传时，我想显示一个图像，直到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>

我无法理解错误在哪里。

Answer 1

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

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

Answer 2

为什么在使用jquery的show()函数时使用css属性。

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

例如：

if ($('#uploading').css('visibility') == 'hidden') {
    $('#uploading').show();
}

最好的办法

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

and

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

Answer 3

visibility和display是2个不同的CSS属性： https://developer.mozilla.org/en-US/docs/Web/CSS/visibility

可见性CSS属性可以显示或隐藏元素而不影响文档的布局（即，为元素创建空间，无论它们是否可见）。该属性还可以隐藏a中的行或列。

https://developer.mozilla.org/en-US/docs/Web/CSS/display

显示CSS属性指定用于元素的呈现框的类型。在HTML中，默认显示属性值取自HTML规范中描述的行为或浏览器/用户默认样式表。 XML中的默认值是内联的，包括SVG元素。除了许多不同的显示框类型之外，值none还可以关闭元素的显示;当您使用none时，所有后代元素的显示都会关闭。呈现文档，就好像文档树中不存在该元素一样。

在您的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; " />

在javascript中，您正在更改不同的属性：

 if ($('#uploading').css('visibility') == 'hidden') {
        $('#uploading').css('visibility','visible');
    }

这就是图像没有显示的原因，所以你需要在两者上使用相同的属性，例如将你的js改为：

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

或更好地使用：

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

或者更好地使用toggle