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中的CMS的涵义
Mar 11 PHP
PHP strtok()函数的优点分析
Mar 02 PHP
PHP中=赋值操作符对不同数据类型的不同行为
Jan 02 PHP
php判断正常访问和外部访问的示例
Feb 10 PHP
PHP static局部静态变量和全局静态变量总结
Mar 02 PHP
PHP获取毫秒级时间戳的方法
Apr 15 PHP
Symfony2创建页面实例详解
Mar 18 PHP
PHP中函数gzuncompress无法使用的解决方法
Mar 02 PHP
thinkphp关于简单的权限判定方法
Apr 03 PHP
PHP文字转图片功能原理与实现方法分析
Aug 31 PHP
ThinkPHP框架实现的邮箱激活功能示例
Jun 15 PHP
php面向对象程序设计中self与static的区别分析
May 21 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产生随机字符串函数
2006/12/06 PHP
php获取淘宝分类id示例
2014/01/16 PHP
php实现遍历目录并删除指定文件中指定内容
2015/01/21 PHP
PHP实现的oracle分页函数实例
2016/01/25 PHP
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
2009/12/04 Javascript
JSON JQUERY模板实现说明
2010/07/03 Javascript
jQuery 隐藏和显示 input 默认值示例
2014/06/03 Javascript
jQuery向后台传入json格式数据的方法
2015/02/13 Javascript
JS实现的网页背景闪电闪烁效果代码
2015/10/17 Javascript
JS Canvas定时器模拟动态加载动画
2016/09/17 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
2017/01/12 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
2017/02/05 Javascript
详解webpack es6 to es5支持配置
2017/05/04 Javascript
详解react服务端渲染(同构)的方法
2017/09/21 Javascript
javascript中神奇的 Date对象小结
2017/10/12 Javascript
使用Vue开发一个实时性时间转换指令
2018/01/17 Javascript
Vue中使用的EventBus有生命周期
2018/07/12 Javascript
Vue常用传值方式、父传子、子传父及非父子实例分析
2020/02/24 Javascript
[52:22]EG vs VG Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
在Python3中使用asyncio库进行快速数据抓取的教程
2015/04/02 Python
Python使用Dijkstra算法实现求解图中最短路径距离问题详解
2018/05/16 Python
python使用tornado实现登录和登出
2018/07/28 Python
解决python 未发现数据源名称并且未指定默认驱动程序的问题
2018/12/07 Python
解决python 文本过滤和清理问题
2019/08/28 Python
python django中8000端口被占用的解决
2019/12/17 Python
基于pygame实现童年掌机打砖块游戏
2020/02/25 Python
CSS3中引入多种自定义字体font-face
2020/06/12 HTML / CSS
HTML5 source标签:媒介元素定义媒介资源
2018/01/29 HTML / CSS
全球最大的跑步用品商店:Road Runner Sports
2016/09/11 全球购物
寻找完美的房车租赁:RVShare
2019/02/23 全球购物
大学本科毕业生求职信范文
2013/12/18 职场文书
银行职员思想汇报
2013/12/31 职场文书
《小猫刮胡子》教学反思
2014/02/21 职场文书
教师批评与自我批评剖析材料
2014/10/16 职场文书
2015年求职自荐信范文
2015/03/04 职场文书
复兴之路观后感3000字
2015/06/02 职场文书