html部分
<div class="layui-form-item">
<label class="layui-form-label" style="width: 200px;margin-left: -120px">image for shopping</label>
<div class="layui-input-block">
<input id="pic" name="pic" type="hidden" class="layui-input"/>
<button type="button" class="layui-btn layui-btn-sm" id="picBtn"><i class="layui-icon"></i>选择图片
</button> Tips:click the image to delete
<div class="layui-upload-list" id="img1" style="display: flex;flex-wrap: wrap;">
</div>
</div>
</div>
js部分
var token = Cookies.get('uds_token');
//普通图片上传
upload.render({
elem: '#picBtn'
,multiple: false
, url: '/uds/sourcing/uploadImg'
, before: function (obj) {
obj.preview(function (index, file, result) {
//console.log("result:",result)
//$('#img1').append('src', result);
if(imageNameArr.length==3){
layer.msg("最多上传三张图片!!!")
return
}
//$('#img1').append('<div id="img2" onclick="deleteImage('+21+')"><img class="layui-upload-img" src="'+result+'" width="92px" height="92px"></div>');
});
}
,data:{
token:token
}
, done: function (res) {
if(imageNameArr.length==3){
//layer.msg("最多上传三张图片!!!")
return
}
// $('#img1').append('<div onclick="deleteImage('+res.data.url+')"><img class="layui-upload-img" src="'+res.data.url+'" width="92px" height="92px"></div>');
layer.msg("上传成功!")
console.log("res:",res)
var imageUrlName = res.data.url
var imageUrl = domainName + imageUrlName;
imageNameArr.push(imageUrlName)
//console.log(imageNameArr)
console.log(imageUrlName)
//var number = "dad";
$('#img1').append("<div id='img2' style='margin-right: 2px' onclick='deleteImage(\""+imageUrlName+"\")'><img class='layui-upload-img' src="+imageUrl+" width='92px' height='92px'></div>");
//layer.open({content:"上传图片成功!"});
}
, error: function (res) {
//
layer.msg("上传图片失败!")
console.log(res)
}
});
//删除图片
window.deleteImage = function (imageUrlName){
console.log("imageUrlName:",imageUrlName)
$('#img2').remove();
for (var i=0;i<imageNameArr.length;i++){
if (imageNameArr[i]==imageUrlName){
imageNameArr.splice(i,1);
}
}
//console.log("imageNameArr:",imageNameArr)
// for(var j=0;j<imageNameArr.length;j++){
// var imageUrl = 'http://api.uds.com/'+imageNameArr[j];
// $('#img1').append("<div id='img2' onclick='deleteImage(\""+imageNameArr[j]+"\")'><img class='layui-upload-img' src="+imageUrl+" width='92px' height='92px'></div>");
// }
}
关注我的公众号SpaceObj 领取idea系列激活码