php layui实现前端多图上传实例


Posted in PHP onJuly 30, 2019

php结合layui前端实现多图上传

前端html代码

<div class="layui-upload">

  <button type="button" class="layui-btn layui-btn-normal" id="testList">请选择图片</button>

  <span class="num_pic"></span>

  <div class="layui-upload-list">

    <table class="layui-table">

      <thead>

        <tr>

          <th>文件名</th>

          <th id="pic">图片预览</th>

          <th>大小</th>

          <th>状态</th>

          <th id="cao">操作</th>

        </tr>

      </thead>

      <tbody id="demoList"></tbody>

    </table>

  </div>

  <button type="button" class="layui-btn" id="testListAction">开始上传</button>

    <span class="num_pic"></span>

</div>

js 代码

<script type="text/javascript">

  layui.use('upload', function() {

    var $ = layui.jquery,

      upload = layui.upload;

    //多文件列表示例

    var demoListView = $('#demoList'),

      uploadListIns = upload.render({

        elem: '#testList',

        url: "{url('pic/index/upload')}",

        accept: 'images',

        acceptMime: 'image/*',

        size: 8192,

        multiple: true,

        number: 400,

        auto: false,

        exts: 'jpg|png|jpeg',

        bindAction: '#testListAction',

        choose: function(obj) {

          var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列

          //读取本地文件

          obj.preview(function(index, file, result) {

            var tr = $(['<tr id="upload-' + index + '">', '<td>' + file.name + '</td>', '<td><img src="' + result + '" alt="' + file.name + '" style="width: 100px;height: 40px;"></td>', '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>', '<td>等待上传</td>', '<td>', '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>', '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>', '</td>', '</tr>'].join(''));

            //单个重传

            tr.find('.demo-reload').on('click', function() {

              obj.upload(index, file);

              $("#upload-" + index).find("td").eq(2).html((file.size / 1014).toFixed(1) + 'kb');

            });

            //删除

            tr.find('.demo-delete').on('click', function() {

              delete files[index]; //删除对应的文件

              tr.remove();

              uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值,以免删除后出现同名文件不可选

            });

            demoListView.append(tr);

            $(".num_pic").text("总共【" + demoListView.find("tr").length + "】张图片");

          });

        },

        done: function(res, index, upload) {

          if(res.code == 0) { //上传成功

            $("#cao").text("地址");

            var tr = demoListView.find('tr#upload-' + index),

              tds = tr.children();

            tds.eq(3).html('<span style="color: #5FB878;">上传成功</span>');

            tds.eq(4).html('<input type="text" name="imgs[]" value="' + res.file + '" class="layui-input" />'); //清空操作

            return delete this.files[index]; //删除文件队列已经上传成功的文件

          }

          this.error(index, upload);

        },

        allDone: function(obj) { //当文件全部被提交后,才触发

          layer.msg("上传文件数量:【" + obj.total + "】张,上传成功:【" + obj.successful + "】张,失败:【" + obj.aborted + "】", {

            time: 3000

          });

          console.log(obj.total); //得到总文件数

          console.log(obj.successful); //请求成功的文件数

          console.log(obj.aborted); //请求失败的文件数

        },

        error: function(index, upload) {

          var tr = demoListView.find('tr#upload-' + index),

            tds = tr.children();

          tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');

          tds.eq(4).find('.demo-reload').removeClass('layui-hide'); //显示重传

        }

      });

  });

</script>

后端代码

public function uploadAction(){

    $file=$_FILES['file'];

    $root_url = 'uploadfiles/pic/image/';

    if (!is_uploaded_file($file['tmp_name'])){

      $data = array('code'=>1,'msg'=>"错误");

      exit(json_encode($data,0));

    }

   /* $root_url.=date('Ymd').'/';*/

    $ext = pathinfo($file['name']);

    $num=makenum($this->memberinfo['id']);

    $root_url.=$num.'/';

    if (!is_dir($root_url)) {

      mkdir($root_url,0777, true);

    }

    $pa=file_list::get_file_list($root_url);

    $na=count($pa) + 1;

    if ($na<10){

      $name=$num.'-000'.$na;

    }elseif($na<100){

      $name=$num.'-00'.$na;

    }elseif($na<1000){

      $name=$num.'-0'.$na;

    }else{

      $name=$num.'-'.$na;

    }

    $n=$root_url.$name.".".$ext['extension'];

    $result=move_uploaded_file($file['tmp_name'],$n);

    if ($result){

      exit(json_encode(array("code"=>0,"msg"=>"ok","file"=>$n,"size"=>$file['size']),0));

    }else{

      exit(json_encode(array("code"=>1,"msg"=>"false","file"=>$n,"size"=>$file['size']),0));

    }

  }

上传效果:

php layui实现前端多图上传实例

php layui实现前端多图上传实例

以上就是php结合layui前端实现多图上传的全部知识点,感谢大家对三水点靠木的支持。

PHP 相关文章推荐
php基础知识:控制结构
Dec 13 PHP
PHP中通过加号合并数组的一个简单方法分享
Jan 27 PHP
(PHP实现)只使用++运算实现加法,减法,乘法,除法
Jun 27 PHP
PHP 过滤页面中的BOM(实现代码)
Jun 29 PHP
Smarty变量调节器失效的解决办法
Aug 20 PHP
destoon调用discuz论坛中带图片帖子的实现方法
Aug 21 PHP
浅谈php正则表达式中的非贪婪模式匹配的使用
Nov 25 PHP
PHP动态输出JavaScript代码实例
Feb 12 PHP
php通过两层过滤获取留言内容的方法
Jul 11 PHP
PHP获取指定日期是星期几的实现方法
Nov 30 PHP
PHP面向对象程序设计OOP继承用法入门示例
Dec 27 PHP
php解决crontab定时任务不能写入文件问题的方法分析
Sep 16 PHP
安装docker和docker-compose实例详解
Jul 30 #PHP
docker-compose部署php项目实例详解
Jul 30 #PHP
php 使用mpdf实现指定字段配置字体样式的方法
Jul 29 #PHP
laradock环境docker-compose操作详解
Jul 29 #PHP
php 根据URL下载远程图片、压缩包、pdf等文件到本地
Jul 26 #PHP
PHP中散列密码的安全性分析
Jul 26 #PHP
PHP基于timestamp和nonce实现的防止重放攻击方案分析
Jul 26 #PHP
You might like
用PHP将数据导入到Foxmail
2006/10/09 PHP
Linux下ZendOptimizer的安装与配置方法
2007/04/12 PHP
Drupal 添加模块出现莫名其妙的错误的解决方法(往往出现在模块较多时)
2011/04/18 PHP
在PHP中设置、使用、删除Cookie的解决方法
2013/05/06 PHP
遍历echsop的region表形成缓存的程序实例代码
2016/11/01 PHP
thinkPHP框架实现图像裁剪、缩放、加水印的方法
2017/03/14 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
各浏览器对click方法的支持差异小结
2011/07/31 Javascript
js 获取(接收)地址栏参数值的方法
2013/04/01 Javascript
jquery实现的伪分页效果代码
2015/10/29 Javascript
JS拖拽组件学习使用
2016/01/19 Javascript
Bootstrap基本布局实现方法详解
2016/11/25 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
2016/12/14 Javascript
详解js的事件处理函数和动态创建html标记方法
2016/12/16 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
2017/09/18 jQuery
vue-prop父组件向子组件进行传值的方法
2018/03/01 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
2020/06/19 Javascript
解决Nuxt使用axios跨域问题
2020/07/06 Javascript
Vue组件跨层级获取组件操作
2020/07/27 Javascript
详细解读Python的web.py框架下的application.py模块
2015/05/02 Python
Windows下python2.7.8安装图文教程
2016/05/26 Python
python+opencv实现车牌定位功能(实例代码)
2019/12/24 Python
django model 条件过滤 queryset.filter(**condtions)用法详解
2020/05/20 Python
英国游戏机和游戏购物网站:365games.co.uk
2018/06/18 全球购物
HOTEL INFO英国:搜索全球酒店
2019/08/08 全球购物
大学生最常用的自我评价
2013/12/07 职场文书
应届专科生个人的自我评价
2014/01/05 职场文书
秋季运动会加油稿200字
2014/01/11 职场文书
求职信范文怎么写
2014/01/29 职场文书
十佳少年事迹材料
2014/12/25 职场文书
办公室文员岗位职责
2015/02/04 职场文书
2016年优秀少先队辅导员事迹材料
2016/02/26 职场文书
python用字节处理文件实例讲解
2021/04/13 Python
MySQL时间盲注的五种延时方法实现
2021/05/18 MySQL
CSS 实现Chrome标签栏的技巧
2021/08/04 HTML / CSS
redis中lua脚本使用教程
2021/11/01 Redis