首页
所有分类
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 09 PHP
PHP的加密方式及原理
Jun 14 PHP
php构造函数的继承方法
Feb 09 PHP
PHP多线程之内部多线程实例分析
Mar 09 PHP
php实现阿拉伯数字和罗马数字相互转换的方法
Apr 17 PHP
PHP判断FORM表单或URL参数来的数据是否为整数的方法
Mar 25 PHP
php处理json格式数据经典案例总结
May 19 PHP
Yii调试查看执行SQL语句的方法
Jul 15 PHP
thinkphp跨库操作的简单代码实例
Sep 22 PHP
Smarty模板常见的简单应用分析
Nov 15 PHP
因str_replace导致的注入问题总结
Aug 08 PHP
Yii框架学习笔记之应用组件操作示例
Nov 13 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
主从复制(1) 封装(1) transaction(1) Slave(1) variables(1) PyAutoGUI(1) 继承(1) 百度地图(1) Master(1) gRPC(3)
You might like
鸡肋的PHP单例模式应用详解
2013/06/03 PHP
PHP中exec与system用法区别分析
2014/09/22 PHP
smarty中改进truncate使其支持中文的方法
2016/05/30 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
2021/03/09 HTML / CSS
关于Blog顶部的滚动导航条代码
2006/09/25 Javascript
JavaScript 事件的一些重要说明
2009/10/25 Javascript
JavaScript DOM 学习第九章 选取范围的介绍
2010/02/19 Javascript
jquery.validate使用攻略 第五步 正则验证
2010/07/01 Javascript
常规表格多表头查询示例
2014/02/21 Javascript
javascript中数组array及string的方法总结
2014/11/28 Javascript
JS数字抽奖游戏实现方法
2015/05/04 Javascript
jquery easyui validatebox remote的使用详解
2016/11/09 Javascript
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
2017/03/04 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
2017/04/02 jQuery
jQuery设置图片等比例缩小的方法
2017/04/29 jQuery
VUE2 前端实现 静态二级省市联动选择select的示例
2018/02/09 Javascript
JavaScript函数节流和函数去抖知识点学习
2018/07/31 Javascript
详解package.json版本号规则
2019/08/01 Javascript
python中使用百度音乐搜索的api下载指定歌曲的lrc歌词
2014/07/18 Python
python常用函数详解
2016/09/13 Python
python下os模块强大的重命名方法renames详解
2017/03/07 Python
Python只用40行代码编写的计算器实例
2017/05/10 Python
java中两个byte数组实现合并的示例
2018/05/09 Python
python生成每日报表数据(Excel)并邮件发送的实例
2019/02/03 Python
python被修饰的函数消失问题解决(基于wraps函数)
2019/11/04 Python
Python socket模块方法实现详解
2019/11/05 Python
通过代码实例了解Python异常本质
2020/09/16 Python
Under Armour安德玛英国官网：美国高端运动科技品牌
2018/09/17 全球购物
如何在C# winform中异步调用web services
2015/09/21 面试题
护士个人简历自荐信
2013/10/18 职场文书
生日邀请函范文
2014/01/13 职场文书
企业元宵节主持词
2014/03/25 职场文书
防汛工作情况汇报
2014/10/28 职场文书
教师远程培训心得体会
2016/01/09 职场文书
pytorch 实现在测试的时候启用dropout
2021/05/27 Python