最近在做一个多图片上传,并可点击预览图片和删除图片,看页面效果

1.

layui上传图片插件

2.

layui上传图片插件layui上传图片插件



3.点击图片x可进行删除

4.上传用的layui插件,layui在项目中的具体使用

4.1进入相关文件

layui上传图片插件

4.2layui上传图片插件

4.3

layui上传图片插件

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

layui上传图片插件

4.5

layui上传图片插件

4.6

layui上传图片插件


相关文章: