tp5 多图片上传 tp5使用layui实现多个图片上传(带附件选择)的方法实例
bilichen006 人气:0想了解tp5使用layui实现多个图片上传(带附件选择)的方法实例的相关内容吗,bilichen006在本文为您仔细讲解tp5 多图片上传的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:tp5,多图片上传,tp5,layui图片上传,tp5,图片上传,下面大家一起来学习吧。
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"></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'); }
加载全部内容