tp5使用layui实现多个图片上传(带附件选择)的方法实例

作者：袖梨 2023-08-29

在以前项目中遇到有上传图片都是用 web Uploader插件上传,因为我现在项目都在使用 layui 所以今天趁着有时间写一个tp5结合layui上传图片的示例，感兴趣的可以了解一下

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> <formaction="" 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> <inputname="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 +'"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){//预读本地文件示例，不支持ie8obj.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实现多个图片上传(带附件选择)的方法实例的文章就介绍到这了,更多相关tp5 多图片上传内容请搜索一聚教程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持一聚教程网！