Thinkphp5+Layui实现多图上传

今天波波写的笔记是thinkphp5搭配layui实现的多图上传,其实这个多图上传组件和单图上传组件在波波开源的后台框架中早已封装,这篇笔记主要记录实现的过程。

首先看下效果图:

Thinkphp5+Layui实现多图上传

CSS部分:

  1. <style>
  2. .layui-upload-img { width90pxheight90pxmargin: 0; }
  3. .pic-more { width:100%; leftmargin10px 0px 0px 0px;}
  4. .pic-more li { width:90pxfloatleftmargin-right5px;}
  5. .pic-more li .layui-input { display: initial; }
  6. .pic-more li a { positionabsolutetop: 0; displayblock; }
  7. .pic-more li a i { font-size24pxbackground-color#008800; }
  8. #slide-pc-priview .item_img img{ width90pxheight90px;}
  9. #slide-pc-priview li{positionrelative;}
  10. #slide-pc-priview li .operate{ color#000displaynone;}
  11. #slide-pc-priview li .toleft{ positionabsolute;top40pxleft1pxcursor:pointer;}
  12. #slide-pc-priview li .toright{ positionabsolute;top40pxrightright1px;cursor:pointer;}
  13. #slide-pc-priview li .close{positionabsolute;top5pxrightright5px;cursor:pointer;}
  14. #slide-pc-priview li:hover .operate{ displayblock;}
  15. </style>

HTML部分:

  1. <div class="layui-form-item" id="pics">
  2.   <div class="layui-form-label">相册图集</div>
  3.   <div class="layui-input-block" style="width: 70%;">
  4.     <div class="layui-upload">
  5.       <button type="button" class="layui-btn layui-btn-primary pull-left" id="slide-pc">选择多图</button>
  6.       <div class="pic-more">
  7.         <ul class="pic-more-upload-list" id="slide-pc-priview">
  8.         </ul>
  9.       </div>
  10.     </div>
  11.   </div>
  12. </div>

JS部分:

  1. <script>
  2.          layui.use('upload', function(){
  3.          var $ = layui.jquery;
  4.          var upload = layui.upload;
  5.  upload.render({
  6.      elem: '#slide-pc',
  7.      url: '{:url('admin/common/upload')}',
  8.      size: 500,
  9.      exts: 'jpg|png|jpeg',
  10.      multiple: true,
  11.      before: function(obj) {
  12.          layer.msg('图片上传中...', {
  13.                 icon: 16,
  14.                 shade: 0.01,
  15.                 time: 0
  16.             })
  17.      },
  18.      done: function(res) {
  19.         layer.close(layer.msg());//关闭上传提示窗口
  20.          if(res.status == 0) {
  21.              return layer.msg(res.message);
  22.          }
  23.          //$('#slide-pc-priview').append('<input type="hidden" name="pc_src[]" value="' + res.filepath + '" />');
  24.          $('#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>');
  25.      }
  26.  });
  27. });
  28. //点击多图上传的X,删除当前的图片    
  29. $("body").on("click",".close",function(){
  30.     $(this).closest("li").remove();
  31.   });
  32.  //多图上传点击<>左右移动图片
  33.   $("body").on("click",".pic-more ul li .toleft",function(){
  34.     var li_index=$(this).closest("li").index();
  35.     if(li_index>=1){
  36.       $(this).closest("li").insertBefore($(this).closest("ul").find("li").eq(Number(li_index)-1));
  37.     }
  38.   });
  39.   $("body").on("click",".pic-more ul li .toright",function(){
  40.     var li_index=$(this).closest("li").index();
  41.     $(this).closest("li").insertAfter($(this).closest("ul").find("li").eq(Number(li_index)+1));
  42.   });
  43. </script>

至于Thinkphp的控制器代码就不说了,PHP多图上传逻辑而已。如果一定要一个参考代码的话,可以看我的开源后台框架,网址:https://www.zkii.net/code/webcode/1637.html

 

 

你想把广告放到这里吗?

发表评论

您必须 登录 才能发表留言!