首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 PHP

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

Posted in PHP onNovember 17, 2021

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

tp5使用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;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 多图片上传内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木！

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

- Author -

bilichen006

- Original Sources -

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

PHP 相关文章推荐
求PHP数组最大值,最小值的代码
Oct 31 PHP
php中使用cookie来保存用户登录信息的实现代码
Mar 08 PHP
php去除换行(回车换行)的三种方法
Mar 26 PHP
ThinkPHP CURD方法之where方法详解
Jun 18 PHP
实用的PHP带公钥加密类分享(每次加密结果都不一样哦)
Aug 20 PHP
php中字符查找函数strpos、strrchr与strpbrk用法
Nov 18 PHP
Joomla使用Apache重写模式的方法
May 04 PHP
Yii框架实现邮箱激活的方法【数字签名】
Oct 18 PHP
PHP判断数组是否为空的常用方法(五种方法)
Feb 08 PHP
PHP编程实现csv文件导入mysql数据库的方法
Apr 29 PHP
php实现统计二进制中1的个数算法示例
Jan 23 PHP
PHP获取访问设备信息的方法示例
Feb 20 PHP
php png失真的原因及解决办法
Nov 17 #PHP
php实例化对象的实例方法
Nov 17 #PHP
php访问对象中的成员的实例方法
Nov 17 #PHP
php实现自动生成验证码的实例讲解
Nov 17 #PHP
php将xml转化对象的实例详解
Nov 17 #PHP
解决Laravel使用验证时跳转到首页的问题
Nov 17 #PHP
php png失真的原因及解决办法
Oct 24 #PHP
mediapipe(1) python小游戏(5) 索引(8) 德生2P3(1) 计算机视觉(2) 贪吃蛇(2) 备份(2) 全局锁(1) SnakeGame(1) 索尼ICF-36(1)
You might like
PHP中substr()与explode()函数用法分析
2014/11/24 PHP
PHP使用缓存即时输出内容(output buffering)的方法
2015/08/03 PHP
PHP异常处理定义与使用方法分析
2017/07/25 PHP
PHP生成随机密码4种方法及性能对比
2020/12/11 PHP
百度地图api应用标注地理位置信息(js版)
2013/02/01 Javascript
JQuery中如何传递参数如click(),change()等具体实现
2013/04/28 Javascript
JavaScript获取FCK编辑器信息的具体方法
2013/07/12 Javascript
js获取或设置当前窗口url参数的小例子
2013/10/14 Javascript
Jquery实现的角色左右选择特效
2014/05/21 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
2016/03/30 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
2016/09/23 Javascript
js转html实体的方法
2016/09/27 Javascript
从零学习node.js之搭建http服务器（二）
2017/02/21 Javascript
vue实现城市列表选择功能
2018/07/16 Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
2018/10/16 Javascript
详解js创建对象的几种方法及继承
2019/04/12 Javascript
Angular Excel 导入与导出的实现代码
2019/04/17 Javascript
详解如何搭建mpvue框架搭配vant组件库的小程序项目
2019/05/16 Javascript
js实现坦克移动小游戏
2019/10/28 Javascript
element-ui tooltip修改背景颜色和箭头颜色的实现
2019/12/16 Javascript
vuex Module将 store 分割成模块的操作
2020/12/07 Vue.js
[01:31]（回顾）杀出重围，决战TI之巅
2014/07/01 DOTA
Python计算三角函数之asin()方法的使用
2015/05/15 Python
Django实现学生管理系统
2019/02/26 Python
python多线程http压力测试脚本
2019/06/25 Python
python2和python3应该学哪个(python3.6与python3.7的选择)
2019/10/01 Python
Python+Kepler.gl轻松制作酷炫路径动画的实现示例
2020/06/02 Python
Python3使用Selenium获取session和token方法详解
2021/02/16 Python
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
2019/01/18 HTML / CSS
梅西酒窖：Macy’s Wine Cellar
2018/01/07 全球购物
编写类String的构造函数、析构函数和赋值函数
2012/05/29 面试题
技术岗位竞聘演讲稿
2014/05/16 职场文书
丽江古城导游词
2015/02/03 职场文书
专职安全员岗位职责
2015/04/11 职场文书
Python代码，能玩30多款童年游戏！这些有几个是你玩过的
2021/04/27 Python
Keras在mnist上的CNN实践,并且自定义loss函数曲线图操作
2021/05/25 Python