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