layui实现多图上传，图片自由排序，自由删除

layui实现多图上传，图片自由排序，自由删除

未分类admin
https://www.cnblogs.com/wukong1688/p/11104620.html

 

现效果如下图所示：

1653347-20190706062222086-642463483

 

实现代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="__STATIC__/layui/css/layui.css"  media="all">
  <style>
.layui-upload-img { width: 150px; height: 150px; 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 .operate{ display: block;}    
</style>
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
  
 
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>上传多张图片</legend>
</fieldset>
 
<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>
 
 
<script src="__STATIC__/jquery-3.3.1.min.js" charset="utf-8"></script>
<script src="__STATIC__/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的'http://wx.xxxxx.cn/index.php/index/index/upload ////http://www.wxthinkphp.com/index.php/index/index/upload-->
<script>
         layui.use('upload', function(){
         var $ = layui.jquery;
         var upload = layui.upload;            
 upload.render({
     elem: '#slide-pc',
     url: 'http://wx.xxxxx.cn/index.php/index/index/upload',
     size: 50000,
     exts: 'jpg|png|jpeg',
     multiple: true,
     before: function(obj) {
       
     },
     done: function(res) {
     	      if(res.code>0){
     	      	    $('#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="'+ res.url +'" class="img" ><input type="hidden" name="pc_src[]" value="'+ res.url +'" /></li>');
               
                }else{
                    //如果上传失败
                    return layer.msg('上传失败');
                }
     }
 });
});
//点击多图上传的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>
 
</body>
</html>

 

 
  public function upload(){
    // 获取上传文件表单字段名
    $fileKey = array_keys(request()->file());
    // 获取表单上传文件
    $file = request()->file($fileKey['0']);
    // 移动到框架应用根目录/public/uploads/ 目录下
    $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
    if($info){
        $result['code'] = 1;
        $result['info'] = '图片上传成功!';
        $path=str_replace('\\','/',$info->getSaveName());
        $result['url'] = '/uploads/'. $path;
        return $result;
    }else{
        // 上传失败获取错误信息
        $result['code'] =0;
        $result['info'] = '图片上传失败!';
        $result['url'] = '';
        return $result;
    }
}

 

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
<script src="https://www.layuicdn.com/layui/layui.js"></script>
</head>
<body>

<style>
.layui-upload-img { width: 150px; height: 150px; 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 .operate{ display: block;}    
</style>


  
 
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
  <legend>上传多张图片</legend>
</fieldset>
 
<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>
 
 
 <script>
         layui.use('upload', function(){
         var $ = layui.jquery;
         var upload = layui.upload;            
 upload.render({
     elem: '#slide-pc',
     url: '/upload',
     size: 50000,
     exts: 'jpg|png|jpeg',
     multiple: true,
     before: function(obj) {
       
     },
     done: function(res) {
     	      if(res.code>0){
     	      	    $('#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="'+ res.url +'" class="img" ><input type="hidden" name="pc_src[]" value="'+ res.url +'" /></li>');
               
                }else{
                    //如果上传失败
                    return layer.msg('上传失败');
                }
     }
 });
});
//点击多图上传的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>
 



    
    
    
    
    <!--您的Layui代码start-->
    <script type="text/javascript">
    layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element'], function() {
      var laydate = layui.laydate //日期
      ,laypage = layui.laypage //分页
      ,layer = layui.layer //弹层
      ,table = layui.table //表格
      ,carousel = layui.carousel //轮播
      ,upload = layui.upload //上传
      ,element = layui.element; //元素操作 等等...

      /*layer弹出一个示例*/
      layer.msg('Hello World');
    });
    </script>
    
    
  </body>

</html>

 

参考：

https://www.cnblogs.com/yehuisir/p/10851866.html

 

本博客地址： wukong1688

本文原文地址：https://www.cnblogs.com/wukong1688/p/11104620.html

转载请著名出处！谢谢~~

© 2023 世界是平的