效果预览:
布局思路:
(1)外层一个div,用来放上传图片的背景图和展示图
(2)内层两个input,一个text类型加属性hidden,用来将上传图片后得到的路径进行赋值给value来提交。一个file类型用来实现文件上传。
HTML:
<div style="width:130px;height:70px;background:url(../images/1.png) center center / cover no-repeat;">
<input type="text" id="submitImg" name="content_img1" value="" hidden>
<input type="file" id="uploadImg" name="" onchange="preview(this,'srcBgName')" value="">
</div>
JS:
$("#uploadImg").change(function(){
var formData = new FormData();
formData.append("image",$("#uploadImg")[0].files[0]);
//调用上传图片函数
uploadImages(formData,"#submitImg");
});
//上传图片函数
function uploadImages(jsonData,ele){
var uid = xxx;
var token = yyy;
jsonData.append("uid",uid);
jsonData.append("token",token);
$.ajax({
url: url,
type: 'post',
data: jsonData,
processData: false,
contentType: false,
success: function (data) {
//上传成功后,将返回的图片路径赋值给隐藏的input的value,从而进行提交
$(ele).val(data.data);
//上传成功后给用户提示
layer.alert(data.api_msg);
},
error: function (data) {
console.info(data);
}
});
}
//图片的展示预览
function preview(imageFile,srcBgName) {
//拼接没上传图片前的背景图路径
var srcbgUrl = "../images/" + srcBgName + ".png";
//图片上传成功后返回的图片路径
if(file.files && file.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$(imageFile).parent().css({
"background": "url(" + e.target.result + ") center center no-repeat",
"background-size": "cover"
});
}
reader.readAsDataURL(file.files[0]);
}else {
//改选图片时没上传图片时恢复原背景图
$(imageFile).parent().css({
"background": "url(" + srcbgUrl + ") center center no-repeat",
"background-size": "cover"
});
}
}