我有一个元素，当我单击它时，它会打开输入对话框并上传所选照片。服务器用 4 个元素作为 JSON 对象 响应请求: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;
}
});
});
});
问题是它替换了正确的背景，但图像未加载并显示空白。我该怎么办？
最佳答案
您缺少一个':
.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，或者做一个完整字符串的控制台日志
关于javascript - 通过 Ajax 上传照片后替换 css 背景图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20269462/