Javascript 通过Ajax上传照片后替换css背景图像
我有一个元素,当我点击它时,它会打开输入对话框并上传所选的照片。服务器用4个项目作为一个JSON对象来响应请求:Javascript 通过Ajax上传照片后替换css背景图像,javascript,jquery,css,ajax,json,Javascript,Jquery,Css,Ajax,Json,我有一个元素,当我点击它时,它会打开输入对话框并上传所选的照片。服务器用4个项目作为一个JSON对象来响应请求:名称、类型、高度、宽度 我想要的是在成功的ajax上传过程之后,用新上传的照片重新加载/刷新元素背景。到目前为止,我不知道这些: JS: $(document).ready(function() { $("input[name!='photo_1']").parents('.fileinput-wrapper').find(".label").remove(); $(
名称、类型、高度、宽度
我想要的是在成功的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,或者对完整字符串进行控制台日志记录这种情况随时都会发生:D非常欢迎。有时4只眼睛看到的东西多于2只;)好像你没有上传照片。。。您发送的只是一个
名称
?