关于php:tp5使用layui实现多个图片上传带附件选择的方法实例

47次阅读

共计 5690 个字符，预计需要花费 15 分钟才能阅读完成。

在以前我的项目中遇到有上传图片都是用 web Uploader 插件上传, 因为我当初我的项目都在应用 layui 所以明天趁着有工夫写一个 tp5 联合 layui 上传图片的示例，感兴趣的能够理解一下

p5 应用 layui 实现多个图片上传（带附件抉择），如何加载 layui 在此不具体阐明，有须要能够百度

html 代码，次要解决都是在 jq 中，实现办法全副原创，兴许不是最简略的，但也能实现成果

{include file="public/header" /}
<body>
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href=""> 首页 </a>
        <a href=""> 多选图片列表 </a>
        <a>
          <cite> 增加多选图片 </cite></a>
      </span>
  <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" rel="external nofollow"  title="刷新">
    <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body">
  <div class="top" style="font-size: 14px"> 增加多选图片 </div>
  <div style="width:100%;height: 5px;background-color: #077ee3;margin-top: 5px;margin-bottom: 20px"></div>
 
    <form  action=""enctype="multipart/form-data"method="post"role="form"onSubmit="return check()">
 
 
      <div class="layui-upload">
        <button type="button" class="layui-btn" id="upload_img"> 多图片上传 </button>
        <a class="layui-btn layui-btn-sm layui-btn-normal" onclick="selectImg(' 抉择图片 ','{:url("selectImg")}','1000','600')" href="javascript:;" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >
        <i class="layui-icon">&#xe60a;</i> 抉择图片
        </a>
        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
          预览图：<div class="layui-upload-list" id="demo2"></div>
        </blockquote>
      </div>
 
      <input  name="url" class="imgInput" type="hidden">
      <!--<button type="button"  class="layui-btn" onclick="test()">-->
        <!-- 测试 -->
      <!--</button>-->
    <div class="layui-form-item">
      <label for=""class="layui-form-label">
      </label>
      <button type="submit" class="layui-btn btnAdd" lay-filter="add" lay-submit="">
        减少
      </button>
 
    </div>
  </form>
</div>
<style>
  .imgInput{
    width: 600px;
    height: 35px;
  }
  .layui-form-label{
    font-size: 14px;
    width: 100px;
  }
 
  select{width: 500px;}
  #pre_img{
    display: none;
    padding: 5px;
    border: 1px solid #999;
  }
  #demo2{
    display: flex;
    display: -webkit-flex;
    /*justify-content: space-between;*/
    flex-direction: row;
    flex-wrap: wrap;
  }
  .img{
    width: 150px;
    height: 150px;
  }
  .btnAdd{margin-top: 40px;}
  .img_item{
    display: flex;
    flex-direction: column;
    text-align: center;
    margin-right: 20px;
    margin-bottom: 20px;
  }
  .delimg{
    text-align: center;
    line-height: 20px;
    width: 160px;
    height: 20px;
    background-color: red;
    color: white;
    margin-top: 5px;
  }
</style>
 
<script>
  function check(){$('input[name="url"]').val(urlList);
    var str = $('input[name="url"]').val();
 
    if(str ==''|| str==null || str=='undefined'){alert("请抉择图片");
      return false;
    }
 
  }
 
  function selectImgGo($url,$urlWeb){
    var index = 0;
    if(urlList.length>0){index = urlList.length;}
      var img = $([
        '<div class="img_item">',
        '<div class="img"style="overflow:hidden;">',
        '<img src="'+ $urlWeb +'"alt="' + $url +'"class="layui-upload-img"style="max-width:150px;"></div>',
        '<div class="delimg"id="delimg"onclick=delImg("'+ index +'")  href="javascript:;"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"style="cursor:pointer "> 删除 </div></div>'
      ].join(''));
      $('#demo2').append(img);
 
    urlList.push($url);
    imgList.push($urlWeb);
  }
  var imgList = [];
  var urlList = [];
  layui.use(['upload','jquery'],function () {
    $ = layui.jquery;
    var upload = layui.upload;
    // 多图片上传
    upload.render({
      elem: '#upload_img'
      ,url:"{:url('share/upload_img')}" // 上传接口
      ,multiple: true
      ,before: function(obj){
        // 预读本地文件示例，不反对 ie8
        obj.preview(function(index, file, result){})
      }
      ,done: function(res){
        var index0 = 0;
        if(urlList.length>0){index0 = urlList.length;}
        var img0 = $([
          '<div class="img_item">',
          '<div class="img"style="overflow:hidden;">',
          '<img src="'+ res.msg +'"class="layui-upload-img"style="max-width:150px;"></div>',
          '<div class="delimg"id="delimg"onclick=delImg("'+ index0 +'")  href="javascript:;"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"style="cursor:pointer "> 删除 </div></div>'
        ].join(''));
        $('#demo2').append(img0);
        urlList.push(res.url);
        imgList.push(res.msg);
      }
      ,error: function(){//        layer.close(layer.msg());// 敞开上传提醒窗口
        // 申请异样回调
      }
 
    });
  });
 
  function delImg(index){urlList.splice(index,1);
    imgList.splice(index,1);
    $('#demo2').empty();
    for (var i=0;i<imgList.length;i++){
      var img0 = $([
        '<div class="img_item">',
        '<div class="img"style="overflow:hidden;">',
        '<img src="'+ imgList[i] +'"class="layui-upload-img"style="max-width:150px;"></div>',
        '<div class="delimg"id="delimg"onclick=delImg("'+ i +'")  href="javascript:;"rel="external nofollow"rel="external nofollow"rel="external nofollow"rel="external nofollow"style="cursor:pointer "> 删除 </div></div>'
      ].join(''));
      $('#demo2').append(img0);
    }
  }
 
  /* 抉择图片 */
  function selectImg(title,url,w,h){x_admin_show(title,url,w,h);
  } 
</script>
</body> 
</html>

php 代码

  //php layui 图片上传
    public function upload_img(){$file = request()->file('file'); // 获取上传的文件
        if($file==null){exit(json_encode(array('code'=>1,'msg'=>'未上传图片')));
        }else{
            //5、对上传文件做出条件限度（类型，大小等）$map = [
                'ext'=>'jpg,png,gif,jpeg',// 后辍名
                'size'=>320000000,// 最大 3M
            ];
            //6、对上传的文件进行较验，如果合格就进行转移到预约设定好的 public/uploads 目录下
            // 返回保留的文件信息 info，包含文件名和大小等数据
            $info = $file->validate($map)->move(ROOT_PATH . 'public/uploads/img');
            // 获取图片宽高
            list($width , $height , $type , $attr) = getimagesize ($info->getPathName());
 
            if(is_null($info)){$this->error($info->getError());
            }
            $img = str_replace('\\','/',$info->getSaveName());
            // 保留附件
            $annexData['filesize'] = $info->getInfo()['size'];
            $annexData['mimetype'] = $info->getInfo()['type'];
            $annexData['filename'] = $info->getInfo()['name'];
            $annexData['imagewidth'] = $width;
            $annexData['imageheight'] = $height;
            $annexData['type'] = 'img';
            $annexData['url'] = $img;
            AAnnexModel::create($annexData);
            $img = constant("URL")."/uploads/img/".$img;
            exit(json_encode(array('code'=>0,'msg'=>$img,'url'=>$annexData['url'])));
        }
 
    }
 
 // 多选图片增加页面
    public function addImages(){if($this->request->isPost()){
            //2、获取提交过去的数据，最初 true 参数，示意连上传文件一起获取
            $data = $this->request->param(true);
            $res = AImagesModel::create($data);
            if(is_null($res)){$this->error('文件增加失败');
            }else{$this->success('文件增加胜利...',url('imagesList'));
            }
            return;
        }
        return $this->fetch('images_add');
    }

到此这篇对于 tp5 应用 layui 实现多个图片上传 (带附件抉择) 的办法实例的文章就介绍到这了。

正文完
php
发表至： php
2022-06-15
 0
关于php:Clickhouse架构及应用
关于php:PHP之旅出发phpapacheMySQL
关于php:2020年10月php面试笔记
关于redis:redis入门教程3客户端