通过 Ajax 上传该照片后替换 CSS 背景图像

Question

我有一个元素，当我单击它会打开输入对话框并上传所选照片。服务器使用 4 个项目作为 JSON OBJECT 响应请求：NAME,TYPE,HEIGHT,WIDTH.

我想要的是在成功的 ajax 上传过程之后，用新上传的照片重新加载/刷新元素背景。到目前为止，我已经穿了这些：

JS：

$(document).ready(function() {
    $("input[name!='photo_1']").parents('.fileinput-wrapper').find(".label").remove();

    $("input[type=file]").on('change',function(){
        $(this).parents('label').find('.fileinput-preview').css('background','url(http://localhost/project/assets/images/ajax-loader.GIF) no-repeat center center');
        var selectedElement = this;
        var name = $(this).attr('name').toString();
        $('#upload').ajaxSubmit({
            dataType:'json',
            data: {name:name},
            beforeSubmit:function(){
                $(selectedElement).parents('label').find('input[type=file]').attr('disabled','disabled');
            },
            success: function(data) {
                $(selectedElement).parents('label').find('.fileinput-preview').css('background',"url('http://localhost/project/assets/images/loading.png') no-repeat center center");
                $.each(data, function(index, item) {
                    $(selectedElement).parents('label').find('.fileinput-preview').css('background',"url('http://localhost/project/uploads/"+ item.NAME +") no-repeat center center");//**replacing part**
                });
                $(selectedElement).parents('label').find('input[type=file]').removeAttr('disabled');
                return false;
            },
            error : function(xhr) {
                alert(xhr.responseText);
                return false;
            }
        });
    });

});

问题是它替换了背景权利，但图像未加载并显示为空白。我该怎么办？

Answer 1

您缺少一个'：

.css('background',"url('http://localhost/project/uploads/"+ item.NAME +")

应该是

.css('background',"url(http://localhost/project/uploads/"+ item.NAME +")

url 参数不需要''，url(path/to/file.jpg) 工作正常。不过，您只是设置一个。另外，item.name 是否包含文件扩展名？

与 dom 检查器检查成功后设置的 url，或记录完整字符串的控制台日志