### thinkphp5+layui實現多圖上傳保存到數據庫，可以實現圖片自由排序，自由刪除。   ### 公共css代碼 ~~~ <style> .layui-upload-img { width: 90px; height: 90px; margin: 0; } .pic-more { width:100%; left; margin: 10px 0px 0px 0px;} .pic-more li { width:90px; float: left; margin-right: 5px;} .pic-more li .layui-input { display: initial; } .pic-more li a { position: absolute; top: 0; display: block; } .pic-more li a i { font-size: 24px; background-color: #008800; } #slide-pc-priview .item_img img{ width: 90px; height: 90px;} #slide-pc-priview li{position: relative;} #slide-pc-priview li .operate{ color: #000; display: none;} #slide-pc-priview li .toleft{ position: absolute;top: 40px; left: 1px; cursor:pointer;} #slide-pc-priview li .toright{ position: absolute;top: 40px; right: 1px;cursor:pointer;} #slide-pc-priview li .close{position: absolute;top: 5px; right: 5px;cursor:pointer;} #slide-pc-priview li:hover .operate{ display: block;} </style> ~~~ ### 多圖上傳頁面html代碼 ~~~ <div class="layui-form-item" id="pics"> <div class="layui-form-label">相冊圖集</div> <div class="layui-input-block" style="width: 70%;"> <div class="layui-upload"> <button type="button" class="layui-btn layui-btn-primary pull-left" id="slide-pc">選擇多圖</button> <div class="pic-more"> <ul class="pic-more-upload-list" id="slide-pc-priview"> </ul> </div> </div> </div> </div> ~~~ ### 公共JS代碼 ~~~ <script> layui.use('upload', function(){ var $ = layui.jquery; var upload = layui.upload; upload.render({ elem: '#slide-pc', url: '{:url('admin/common/upload')}', size: 500, exts: 'jpg|png|jpeg', multiple: true, before: function(obj) { layer.msg('圖片上傳中...', { icon: 16, shade: 0.01, time: 0 }) }, done: function(res) { layer.close(layer.msg());//關閉上傳提示窗口 if(res.status == 0) { return layer.msg(res.message); } //$('#slide-pc-priview').append('<input type="hidden" name="pc_src[]" value="' + res.filepath + '" />'); $('#slide-pc-priview').append('<li class="item_img"><div class="operate"><i class="toleft layui-icon"></i><i class="toright layui-icon"></i><i class="close layui-icon"></i></div><img src="__STATIC__/../' + res.filepath + '" class="img" ><input type="hidden" name="pc_src[]" value="' + res.filepath + '" /></li>'); } }); }); //點擊多圖上傳的X,刪除當前的圖片 $("body").on("click",".close",function(){ $(this).closest("li").remove(); }); //多圖上傳點擊<>左右移動圖片 $("body").on("click",".pic-more ul li .toleft",function(){ var li_index=$(this).closest("li").index(); if(li_index>=1){ $(this).closest("li").insertBefore($(this).closest("ul").find("li").eq(Number(li_index)-1)); } }); $("body").on("click",".pic-more ul li .toright",function(){ var li_index=$(this).closest("li").index(); $(this).closest("li").insertAfter($(this).closest("ul").find("li").eq(Number(li_index)+1)); }); </script> ~~~ ## 提示 詳細控制器代碼這些請參考九 http://www.hmoore.net/jiang/thinkphp5/703015