最近在做一個多圖片上傳，並可點選預覽圖片和刪除圖片，看頁面效果

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