首页
所有分类
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 相关文章推荐
操作Oracle的php类
Oct 09 PHP
php正则表达匹配中文问题分析小结
Mar 25 PHP
如何获知PHP程序占用多少内存(memory_get_usage)
Sep 23 PHP
ubuntu10.04配置 nginx+php-fpm模式的详解
Jun 03 PHP
基于php 随机数的深入理解
Jun 05 PHP
深入理解curl类,可用于模拟get,post和curl下载
Jun 08 PHP
关于svn冲突的解决方法
Jun 21 PHP
phpmailer发送gmail邮件实例详解
Jun 24 PHP
php判断一个数组是否为有序的方法
Mar 27 PHP
PHP合并数组+号和array_merge的区别
Jun 25 PHP
Symfony2实现在doctrine中内置数据的方法
Feb 05 PHP
php数组函数array_push()、array_pop()及array_shift()简单用法示例
Jan 26 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) 国际空间站(1) 火星(2) 塑料(1) 人造肉(1) 毅力号(1) 天问一号(1) 酶(1) NASA(1)
You might like
PHP的5个安全措施小结
2012/07/17 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
JQuery控制radio选中和不选中方法总结
2015/04/15 Javascript
jQuery跨域问题解决方案
2015/08/03 Javascript
vue,angular,avalon这三种MVVM框架优缺点
2016/04/27 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
2016/05/16 Javascript
如何使用Bootstrap创建表单
2017/03/29 Javascript
ES6中module模块化开发实例浅析
2017/04/06 Javascript
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
2017/08/25 Javascript
layer弹出层 iframe层去掉滚动条的实例代码
2018/08/17 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
2018/09/12 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
2019/07/10 jQuery
使用next.js开发网址缩短服务的方法
2020/06/17 Javascript
vue-i18n实现中英文切换的方法
2020/07/06 Javascript
Python3.2模拟实现webqq登录
2016/02/15 Python
Python线程指南详细介绍
2017/01/05 Python
详解Golang 与python中的字符串反转
2017/07/21 Python
对pandas的dataframe绘图并保存的实现方法
2017/08/05 Python
Python利用字典将两个通讯录文本合并为一个文本实例
2018/01/16 Python
python selenium 弹出框处理的实现
2019/02/26 Python
python实现静态web服务器
2019/09/03 Python
新建文件时Pycharm中自动设置头部模板信息的方法
2020/04/17 Python
spyder 在控制台(console)执行python文件,debug python程序方式
2020/04/20 Python
澳大利亚领先的武术用品和健身器材供应商：SMAI
2019/03/24 全球购物
Myprotein瑞士官方网站：运动营养和健身网上商店
2019/09/25 全球购物
Hammitt官网：设计师手袋
2020/05/23 全球购物
教师个人的自我评价分享
2014/01/02 职场文书
物流仓储计划书
2014/01/10 职场文书
委托书的写法
2014/08/30 职场文书
学生打架检讨书
2014/10/20 职场文书
师范生见习报告范文
2014/11/03 职场文书
回门宴新娘答谢词
2015/09/29 职场文书
2016大学生求职自荐信范文
2016/01/28 职场文书
《妈妈别哭，有我在》读后感3篇
2020/01/13 职场文书
Nginx进程管理和重载原理详解
2021/04/22 Servers
springboot读取resources下文件的方式详解
2022/06/21 Java/Android