layui多图片上传
<div class="layui-form-item" style="position: relative;width: 1100px;">
<label class="layui-form-label">照片墙</label>
<div class="zpq" id="zpq" style="position: relative;float:left;width: 810px;">
<button type="button" class="layui-btn" id="upload-img4" style="position: relative; margin-left: 10px;margin-top: 10px;">照片墙图片上传</button>
<br/>
</div>
<input id="pictureLists" name="pictureLists" type="hidden">
</div>
<div class="layui-upload" style="position:relative;width: 1008px;">
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;position:relative;left:92px;">
照片墙预览图
<div class="layui-upload-list" id="demo2"></div>
</blockquote>
<div style="position:absolute;top:20px;right:5px;font-size:16px;cursor:pointer;color:#009688" onclick="clearImages()">清空</div>
</div>
<div class="layui-form-item" style="width: 1100px;">
<div class="layui-input-block">
<p style="color: red;">*营地照片墙需上传3-9张图片。</p>
</div>
</div>
var uploadInst = upload.render({
elem : '#upload-img4',
accept: 'file',
url : '${ctx_zull}/system/sys/uploadfile/upload.do?url=files//',
multiple: true,
before: function(obj){
obj.preview(function(index, file, result){
$('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
});
},
done : function(res) {
if (res.code > 0) {
return layer.msg('上传失败');
}
pictureList.push(res.url + res.realname);
},
error : function() {
}
});
if(result.data.pictureList != null){
for(var i=0;i<result.data.pictureList.length;i++){
$(".zpq").append('<div id="'+result.data.pictureList[i].id+'" class="face_nl"><dl><dt><img class="face_img" src="'+'${ctx_nginx}'+'/'+result.data.pictureList[i].pictrue+'"/><img οnclick=deletezpq("'+result.data.pictureList[i].id+'") class="image_remove" src= "'+'${ctx_script}/product/images/xxx.png'+'"/></dt></dl></div>');
}
}
function deletezpq(id){
$.ajax({
type: "post",
url: '${ctx}/camp/campPicture/deletePicture',
data: {
delDataId:id
},
dataType: 'json',
timeout: layerLoadMaxTime,
beforeSend: function(XMLHttpRequest){
loadi = layer.load(2, {shade: layerLoadShade,time: layerLoadMaxTime});
},
success: function(data, textStatus){
layer.close(loadi);
if (data.success==TRUE){
layer.msg("操作成功!");
$("#"+id).remove();
}else{
layer.msg("删除失败!");
}
}
});
}
function clearImages(){
$('#demo2').empty();
pictureList = new Array();
}