最近在做一个多图片上传,并可点击预览图片和删除图片,看页面效果
1.
2.
3.点击图片x可进行删除
4.上传用的layui插件,layui在项目中的具体使用
4.1进入相关文件
4.2
4.3
4.4
layui.use('upload', function(){
var $ = layui.jquery
,upload = layui.upload;
var uploadInst = upload.render({
elem: '#confirmation'
,url: '${ctx}/sli/uploadImage'
,multiple: true
,before: function(obj){
obj.preview(function(index, file, result){
$('#confirmation').after('<span style="padding:5px;"></span><img id="confirmation_url_'+ index +'" src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img"/><span onclick="deleteConfirmationImg(\''+ index
+'\')" id="delete_1_'+ index +'"><img src="${ctxStatic}/images/close.gif" style="width:20px!important;height:20px!important; margin:-33px -5px 18px -15px"></span>');
$('#confirmation').after('<input id="confirmation_img_'+ index +'" style="display:none;" alt="'+ file.name +'" class="layui-upload-img">')
});
}
,allDone: function(obj){ //当文件全部被提交后,才触发
endAll_1();
}
,done: function(res,index){
if(res.code === '200'){
$("#confirmation_url_"+index).attr("onclick","showImage('"+res.context+"')");
$("#delete_1_"+index).attr("data-url",res.context);
}else{
return layer.msg('上传失败');
}
}
});
});
4.4
4.5
4.6