首页
所有分类
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数据缓存技术
Feb 14 PHP
PHP程序61条面向对象分析设计的经验小结
Nov 12 PHP
PHP5中使用DOM控制XML实现代码
May 07 PHP
DEDE采集大师官方留后门的删除办法
Jan 08 PHP
求PHP数组最大值,最小值的代码
Oct 31 PHP
解析CodeIgniter自定义配置文件
Jun 18 PHP
php支付宝接口用法分析
Jan 04 PHP
thinkphp分页集成实例
Jul 24 PHP
Yii2使用表单上传文件的实例代码
Aug 03 PHP
PHP静态延迟绑定和普通静态效率的对比
Oct 20 PHP
PHP实现的AES双向加密解密功能示例【128位】
Sep 03 PHP
php设计模式之策略模式应用案例详解
Jun 17 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
Kotlin(1) 动态权限(1) Spring Security(2) Android Gradle(1) 记事本(1) 内置函数(1) Navicat(1) maven(2) 自定义函数(1) V Rising(1)
You might like
配置PHP使之能同时支持GIF和JPEG
2006/10/09 PHP
不用数据库的多用户文件自由上传投票系统(3)
2006/10/09 PHP
php实现获取局域网所有用户的电脑IP和主机名、及mac地址完整实例
2014/07/18 PHP
PHP中substr()与explode()函数用法分析
2014/11/24 PHP
php实现查询功能（数据访问）
2017/05/23 PHP
通过jQuery源码学习javascript(三)
2012/12/27 Javascript
使用jquery自定义鼠标样式满足个性需求
2013/11/05 Javascript
关闭ie窗口清除Session的解决方法
2014/01/10 Javascript
js中的preventDefault与stopPropagation详解
2014/01/29 Javascript
js调试系列 初识控制台
2014/06/18 Javascript
js实现的点击div区域外隐藏div区域
2014/06/30 Javascript
javascript数组常用方法汇总
2016/09/10 Javascript
微信小程序 less文件编译成wxss文件实现办法
2016/12/05 Javascript
javascript解析ajax返回的xml和json格式数据实例详解
2017/01/05 Javascript
ES6(ECMAScript 6)新特性之模板字符串用法分析
2017/04/01 Javascript
jQuery实现web页面樱花坠落的特效
2017/06/01 jQuery
详解ES6系列之私有变量的实现
2018/11/21 Javascript
JS跨域请求的问题解析
2018/12/03 Javascript
详解实现一个通用的“划词高亮”在线笔记功能
2019/04/23 Javascript
Vue表单控件数据绑定方法详解
2020/02/05 Javascript
vue.js实现h5机器人聊天（测试版）
2020/07/16 Javascript
Vue项目中使用mock.js的完整步骤
2021/01/12 Vue.js
[54:24]Optic vs TNC 2018国际邀请赛小组赛BO2 第二场
2018/08/18 DOTA
python实现简单socket通信的方法
2016/04/19 Python
Python实现的随机森林算法与简单总结
2018/01/30 Python
详解Python下Flask-ApScheduler快速指南
2018/11/04 Python
Python将列表数据写入文件（txt, csv，excel）
2019/04/03 Python
python打印文件的前几行或最后几行教程
2020/02/13 Python
详解python tcp编程
2020/08/24 Python
澳大利亚旅游网站：Lastminute
2017/08/07 全球购物
街头时尚在线：JESSICABUURMAN
2019/06/16 全球购物
大学毕业生的自我鉴定
2013/11/30 职场文书
会计大学生职业生涯规划书范文
2014/01/13 职场文书
学校运动会霸气口号
2014/06/07 职场文书
2019年预备党员的思想汇报：加深对党的认知
2019/09/25 职场文书
Android开发手册TextInputLayout样式使用示例
2022/06/10 Java/Android