thinkPHP5使用layui实现多个图片上传

PHP 作者:hello程序员 2022-05-14 16:54:06

html代码,主要处理都是在jq中,完成方法全部原创,也许不是最简单的,但也能实现效果

{include file="public/header" /}<body><divclass="x-nav">      <spanclass="layui-breadcrumb">        <ahref="">首页</a>        <ahref="">多选图片列表</a>        <a>          <cite>添加多选图片</cite></a>      </span>  <aclass="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="刷新">    <iclass="layui-icon"style="line-height:30px">ဂ</i></a></div><divclass="x-body">  <divclass="top"style="font-size: 14px">添加多选图片</div>  <divstyle="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()">            <divclass="layui-upload">        <buttontype="button"class="layui-btn"id="upload_img">多图片上传</button>        <aclass="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">        <iclass="layui-icon">&#xe60a;</i>选择图片        </a>        <blockquoteclass="layui-elem-quote layui-quote-nm"style="margin-top: 10px;">          预览图:          <divclass="layui-upload-list"id="demo2"></div>        </blockquote>      </div>         <input  name="url"class="imgInput"type="hidden">      <!--<button type="button"  class="layui-btn" onclick="test()">-->        <!--测试-->      <!--</button>-->    <divclass="layui-form-item">      <labelfor=""class="layui-form-label">      </label>      <buttontype="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 = $([        '<divclass="img_item">',        '<divclass="img"style="overflow:hidden;">',        '<imgsrc="'+ $urlWeb +'"alt="' + $url +'"class="layui-upload-img"style="max-width:150px;"></div>',        '<divclass="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 = $([          '<divclass="img_item">',          '<divclass="img"style="overflow:hidden;">',          '<imgsrc="'+ res.msg +'"  class="layui-upload-img"style="max-width:150px;"></div>',          '<divclass="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">',        '<divclass="img"style="overflow:hidden;">',        '<imgsrc="'+ imgList[i] +'"  class="layui-upload-img"style="max-width:150px;"></div>',        '<divclass="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图片上传   publicfunctionupload_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'])));       }     }  //多选图片添加页面   publicfunctionaddImages(){       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');   }

关注公众号:拾黑(shiheibook)了解更多

友情链接:

下软件就上简单下载站:https://www.jdsec.com/
四季很好,只要有你,文娱排行榜:https://www.yaopaiming.com/
让资讯触达的更精准有趣:https://www.0xu.cn/

公众号 关注网络尖刀微信公众号
随时掌握互联网精彩
赞助链接