layui多图上传实现删除功能的方法

Posted 2021-03-15 mo3408

<div class="layui-upload">
    <button type="button" class="layui-btn" id="test2">多图片上传</button>
    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;width: 88%">
        预览图：
        <div class="layui-upload-list uploader-list" style="overflow: auto;" id="uploader-list">                                    
        </div>
    </blockquote>
</div>

css:

<style type="text/css">
        .uploader-list {
            margin-left: -15px;
        }
        .uploader-list .info {
            position: relative;
            margin-top: -25px;
            background-color: black;
            color: white;
            filter: alpha(Opacity=80);
            -moz-opacity: 0.5;
            opacity: 0.5;
            width: 100px;
            height: 25px;
            text-align: center;
            display: none;
        }

        .uploader-list .handle {
            position: relative;
            background-color: black;
            color: white;
            filter: alpha(Opacity=80);
           -moz-opacity: 0.5;
           opacity: 0.5;
            width: 100px;
            text-align: right;
            height: 18px;
            margin-bottom: -18px;
            display: none;
        }
        .uploader-list .handle i {
            margin-right: 5px;
        }
        .uploader-list .handle i:hover {
            cursor: pointer;
        }
        .uploader-list .file-iteme {
            margin: 12px 0 0 15px;
            padding: 1px;
            float: left;
        }
    </style>

js:

  1 upload.render({
  2 
  3             elem: ‘#test2‘
  4 
  5             ,url: ‘‘
  6 
  7             ,multiple: true
  8 
  9             ,before: function(obj){
 10 
 11                 layer.msg(‘图片上传中...‘, {
 12 
 13                     icon: 16,
 14 
 15                     shade: 0.01,
 16 
 17                     time: 0
 18 
 19                 })
 20 
 21             }
 22 
 23             ,done: function(res){
 24 
 25                 layer.close(layer.msg());//关闭上传提示窗口
 26 
 27                 //上传完毕
 28 
 29                 $(‘#uploader-list‘).append(
 30 
 31                     ‘<div id="" class="file-iteme">‘ +
 32 
 33                     ‘<div class="handle"><i class="layui-icon layui-icon-delete"></i></div>‘ +
 34 
 35                     ‘<img style="width: 100px;height: 100px;" src=‘+ res.data.src +‘>‘ +
 36 
 37                     ‘<div class="info">‘ + res.data.title + ‘</div>‘ +
 38 
 39                     ‘</div>‘
 40 
 41                 );
 42 
 43             }
 44 
 45         });
 46 $(document).on("mouseenter mouseleave", ".file-iteme", function(event){
 47 
 48             if(event.type === "mouseenter"){
 49 
 50                 //鼠标悬浮
 51 
 52                 $(this).children(".info").fadeIn("fast");
 53 
 54                 $(this).children(".handle").fadeIn("fast");
 55 
 56             }else if(event.type === "mouseleave") {
 57 
 58                 //鼠标离开
 59 
 60                 $(this).children(".info").hide();
 61 
 62                 $(this).children(".handle").hide();
 63 
 64             }
 65 
 66         });
 67 
 68 // 删除图片
 69        $(document).on("click", ".file-iteme .handle", function(event){
 70 
 71            $(this).parent().remove();  
 72 
 73        });
 74 //thinkphp处理上传文件：
 75 public function upload(){
 76 
 77         //exit(ROOT_PATH . ‘public‘ . DS . ‘uploads‘);
 78 
 79         // 获取表单上传文件 例如上传了001.jpg
 80 
 81         $file = request()->file(‘file‘);
 82 
 83         // 移动到框架应用根目录/public/uploads/ 目录下
 84 
 85         if($file){
 86 
 87             $info = $file->validate([‘size‘=>2097152,‘ext‘=>‘jpg,png,gif‘])->move(ROOT_PATH . ‘public‘ . DS . ‘uploads‘); //限定2MB
 88 
 89             if($info){
 90 
 91                 $src=‘./uploads/‘.str_replace(‘\‘,"/",$info->getSaveName());
 92 
 93                 $image = Image::open($src);
 94 
 95                 $image->thumb(750, 750)->save($src);//压缩图片大小
 96 
 97                 $res[‘code‘]=0;
 98 
 99                 $res[‘msg‘]=‘上传成功！‘;
100 
101                 $res[‘data‘][‘src‘]=‘/uploads/‘.str_replace(‘\‘,"/",$info->getSaveName());
102 
103                 $res[‘data‘][‘title‘]=$info->getFilename();
104 
105             }else{
106 
107                 // 上传失败获取错误信息
108 
109                 $res[‘code‘]=1;
110 
111                 $res[‘msg‘]=‘上传失败！‘.$file->getError();
112 
113             }
114 
115             return $res;
116 
117         }
118 
119     }