当前位置：首页 > CMS教程 > Thinkphp > 列表

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

发布:smiling　来源: PHP粉丝网 　添加日期：2022-05-16 10:32:27　浏览: 评论：0　

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

tp5使用layui实现多个图片上传（带附件选择），如何加载layui在此不详细说明，有需要可以百度。

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

  1. {include file="public/header" /} 
  2. <body> 
  3. <div class="x-nav"> 
  4.       <span class="layui-breadcrumb"> 
  5.         <a href="">首页</a> 
  6.         <a href="">多选图片列表</a> 
  7.         <a> 
  8.           <cite>添加多选图片</cite></a> 
  9.       </span> 
  10.   <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="刷新"> 
  11.     <i class="layui-icon" style="line-height:30px">ဂ</i></a> 
  12. </div> 
  13. <div class="x-body"> 
  14.   <div class="top" style="font-size: 14px">添加多选图片</div> 
  15.   <div style="width:100%;height: 5px;background-color: #077ee3;margin-top: 5px;margin-bottom: 20px"></div> 
  16.    
  17.     <form  action="" enctype="multipart/form-data" method="post" role="form" onSubmit="return check()"> 
  18.    
  19.    
  20.       <div class="layui-upload"> 
  21.         <button type="button" class="layui-btn" id="upload_img">多图片上传</button> 
  22.         <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" > 
  23.         <i class="layui-icon">&#xe60a;</i>选择图片 
  24.         </a> 
  25.         <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;"> 
  26.           预览图： 
  27.           <div class="layui-upload-list" id="demo2"></div> 
  28.         </blockquote> 
  29.       </div> 
  30.    
  31.       <input  name="url" class="imgInput" type="hidden"> 
  32.       <!--<button type="button"  class="layui-btn" onclick="test()">--> 
  33.         <!--测试--> 
  34.       <!--</button>--> 
  35.     <div class="layui-form-item"> 
  36.       <label for="" class="layui-form-label"> 
  37.       </label> 
  38.       <button type="submit" class="layui-btn btnAdd" lay-filter="add" lay-submit=""> 
  39.         增加 
  40.       </button> 
  41.    
  42.     </div> 
  43.   </form> 
  44. </div> 
  45. <style> 
  46.   .imgInput{ 
  47.     width: 600px; 
  48.     height: 35px; 
  49.   } 
  50.   .layui-form-label{ 
  51.     font-size: 14px; 
  52.     width: 100px; 
  53.   } 
  54.    
  55.   select{ 
  56.     width: 500px; 
  57.   } 
  58.   #pre_img{ 
  59.     display: none; 
  60.     padding: 5px; 
  61.     border: 1px solid #999; 
  62.   } 
  63.   #demo2{ 
  64.     display: flex; 
  65.     display: -webkit-flex; 
  66.     /*justify-content: space-between;*/ 
  67.     flex-direction: row; 
  68.     flex-wrap: wrap; 
  69.   } 
  70.   .img{ 
  71.     width: 150px; 
  72.     height: 150px; 
  73.   } 
  74.   .btnAdd{ 
  75.     margin-top: 40px; 
  76.   } 
  77.   .img_item{ 
  78.     display: flex; 
  79.     flex-direction: column; 
  80.     text-align: center; 
  81.     margin-right: 20px; 
  82.     margin-bottom: 20px; 
  83.   } 
  84.   .delimg{ 
  85.     text-align: center; 
  86.     line-height: 20px; 
  87.     width: 160px; 
  88.     height: 20px; 
  89.     background-color: red; 
  90.     color: white; 
  91.     margin-top: 5px; 
  92.   } 
  93. </style> 
  94.    
  95. <script> 
  96.   function check(){ 
  97.     $('input[name="url"]').val(urlList); 
  98.     var str = $('input[name="url"]').val(); 
  99.    
  100.     if(str ==''|| str==null || str=='undefined'){ 
  101.       alert("请选择图片"); 
  102.       return false; 
  103.     } 
  104.    
  105.   } 
  106.    
  107.   function selectImgGo($url,$urlWeb){ 
  108.     var index = 0; 
  109.     if(urlList.length>0){ 
  110.       index = urlList.length; 
  111.     } 
  112.       var img = $([ 
  113.         '<div class="img_item">', 
  114.         '<div class="img" style="overflow:hidden;">', 
  115.         '<img src="'+ $urlWeb +'" alt="' + $url +'" class="layui-upload-img" style="max-width:150px;"></div>', 
  116.         '<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>' 
  117.       ].join('')); 
  118.       $('#demo2').append(img); 
  119.    
  120.     urlList.push($url); 
  121.     imgList.push($urlWeb); 
  122.   } 
  123.   var imgList = []; 
  124.   var urlList = []; 
  125.   layui.use(['upload','jquery'],function () { 
  126.     $ = layui.jquery; 
  127.     var upload = layui.upload; 
  128.     //多图片上传 
  129.     upload.render({ 
  130.       elem: '#upload_img' 
  131.       ,url:"{:url('share/upload_img')}" //上传接口 
  132.       ,multiple: true 
  133.       ,before: function(obj){ 
  134.         //预读本地文件示例，不支持ie8 
  135.         obj.preview(function(index, file, result){ 
  136.    
  137.         }) 
  138.       } 
  139.       ,done: function(res){ 
  140.         var index0 = 0; 
  141.         if(urlList.length>0){ 
  142.           index0 = urlList.length; 
  143.         } 
  144.         var img0 = $([ 
  145.           '<div class="img_item">', 
  146.           '<div class="img" style="overflow:hidden;">', 
  147.           '<img src="'+ res.msg +'"  class="layui-upload-img" style="max-width:150px;"></div>', 
  148.           '<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>' 
  149.         ].join('')); 
  150.         $('#demo2').append(img0); 
  151.         urlList.push(res.url); 
  152.         imgList.push(res.msg); 
  153.       } 
  154.       ,error: function(){ 
  155. //        layer.close(layer.msg());//关闭上传提示窗口 
  156.         //请求异常回调 
  157.       } 
  158.    
  159.     }); 
  160.   }); 
  161.    
  162.   function delImg(index){ 
  163.     urlList.splice(index,1); 
  164.     imgList.splice(index,1); 
  165.     $('#demo2').emptyempty(); 
  166.     for (var i=0;i<imgList.length;i++){ 
  167.       var img0 = $([ 
  168.         '<div class="img_item">', 
  169.         '<div class="img" style="overflow:hidden;">', 
  170.         '<img src="'+ imgList[i] +'"  class="layui-upload-img" style="max-width:150px;"></div>', 
  171.         '<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>' 
  172.       ].join('')); 
  173.       $('#demo2').append(img0); 
  174.     } 
  175.   } 
  176.    
  177.   /*选择图片*/ 
  178.   function selectImg(title,url,w,h){ 
  179.     x_admin_show(title,url,w,h); 
  180.   }  
  181. </script> 
  182. </body>  
  183. </html> 

php代码：

  1. //php layui图片上传 
  2.    public function upload_img(){ 
  3.        $file = request()->file('file'); // 获取上传的文件 
  4.        if($file==null){ 
  5.            exit(json_encode(array('code'=>1,'msg'=>'未上传图片'))); 
  6.        }else{ 
  7.            //5、对上传文件做出条件限制（类型，大小等） 
  8.            $map = [ 
  9.                'ext'=>'jpg,png,gif,jpeg',//后辍名 
  10.                'size'=>320000000,//最大3M 
  11.            ]; 
  12.            //6、对上传的文件进行较验，如果合格就进行转移到预定设定好的public/uploads目录下 
  13.            //返回保存的文件信息info，包括文件名和大小等数据 
  14.            $info = $file->validate($map)->move(ROOT_PATH . 'public/uploads/img'); 
  15.            //获取图片宽高 
  16.            list( $width , $height , $type , $attr ) = getimagesize ($info->getPathName()); 
  17.  
  18.            if(is_null($info)){ 
  19.                $this->error($info->getError()); 
  20.            } 
  21.            $img = str_replace('\\','/',$info->getSaveName()); 
  22.            //保存附件 
  23.            $annexData['filesize'] = $info->getInfo()['size']; 
  24.            $annexData['mimetype'] = $info->getInfo()['type']; 
  25.            $annexData['filename'] = $info->getInfo()['name']; 
  26.            $annexData['imagewidth'] = $width; 
  27.            $annexData['imageheight'] = $height; 
  28.            $annexData['type'] = 'img'; 
  29.            $annexData['url'] = $img; 
  30.            AAnnexModel::create($annexData); 
  31.            $img = constant("URL")."/uploads/img/".$img; 
  32.            exit(json_encode(array('code'=>0,'msg'=>$img,'url'=>$annexData['url']))); 
  33.        } 
  34.  
  35.    } 
  36.  
  37. //多选图片添加页面 
  38.    public function addImages(){ 
  39.        if($this->request->isPost()){ 
  40.            //2、获取提交过来的数据，最后true参数，表示连上传文件一起获取 
  41.            $data = $this->request->param(true); 
  42.            $res = AImagesModel::create($data); 
  43.            if(is_null($res)){ 
  44.                $this->error('文件添加失败'); 
  45.            }else{ 
  46.                $this->success('文件添加成功...',url('imagesList')); 
  47.            } 
  48.            return; 
  49.        } 
  50.        return $this->fetch('images_add'); 
  51.    }

Tags: tp5多个图片上传 layui

分享到：

相关文章

推荐文章

热门文章

最新评论文章