基于Thinkphp5实现多图片上传的思路及方法是什么

tp5使用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;
    iimgList.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');

    }
    
 

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！