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新手上路(十)
Oct 09 PHP
无法在发生错误时创建会话,请检查 PHP 或网站服务器日志,并正确配置 PHP 安装最快的解决办法
Aug 01 PHP
php性能优化分析工具XDebug 大型网站调试工具
May 22 PHP
PHP中鲜为人知的10个函数
Feb 28 PHP
apache中为php 设置虚拟目录
Dec 17 PHP
php对文件进行hash运算的方法
Apr 03 PHP
PHP使用缓存即时输出内容(output buffering)的方法
Aug 03 PHP
CodeIgniter常用知识点小结
May 26 PHP
浅谈PHP中try{}catch{}的使用方法
Dec 09 PHP
PHP判断是否微信访问的方法示例
Mar 27 PHP
PHP中用Trait封装单例模式的实现
Dec 18 PHP
PHP操作Redis常用命令的实例详解
Dec 23 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开发中的错误收集,不定期更新。
2011/02/03 PHP
浅析SVN常见问题及解决方法
2013/06/21 PHP
magento后台无法登录解决办法的两种方法
2016/12/09 PHP
详解EventDispatcher事件分发组件
2016/12/25 PHP
基于php编程规范(详解)
2017/08/17 PHP
PHP代码覆盖率统计详解
2020/07/22 PHP
jquery向.ashx文件post中文乱码问题的解决方法
2011/03/28 Javascript
JS中setTimeout()的用法详解
2013/04/14 Javascript
jQuery简单实现网页选项卡特效
2014/11/24 Javascript
js 中获取制定的cook信息实现方法
2016/11/19 Javascript
js实现从左向右滑动式轮播图效果
2017/07/07 Javascript
jQuery niceScroll滚动条错位问题的解决方法
2018/02/03 jQuery
JavaScript函数的特性与应用实践深入详解
2018/12/30 Javascript
基于 jQuery 实现键盘事件监听控件
2019/04/04 jQuery
Python构建网页爬虫原理分析
2017/12/19 Python
Python语言描述连续子数组的最大和
2018/01/04 Python
Python中的枚举类型示例介绍
2019/01/09 Python
Python进程间通信Queue消息队列用法分析
2019/05/22 Python
Python学习笔记之自定义函数用法详解
2019/06/08 Python
Python编程中类与类的关系详解
2019/08/08 Python
python生成器推导式用法简单示例
2019/10/08 Python
Python序列化与反序列化pickle用法实例
2019/11/11 Python
python获取依赖包和安装依赖包教程
2020/02/13 Python
keras打印loss对权重的导数方式
2020/06/10 Python
Merrell迈乐澳大利亚网站:购买户外登山鞋
2017/05/28 全球购物
哈曼俄罗斯官方网上商店:Harman.club
2020/07/24 全球购物
汽车销售求职自荐信
2013/10/01 职场文书
财务会计毕业生个人求职信
2014/02/03 职场文书
开业庆典策划方案
2014/02/18 职场文书
建筑工程专业大学生求职信
2014/04/23 职场文书
个人自荐材料
2014/05/23 职场文书
单位接收函范文
2015/01/30 职场文书
员工升职自荐信
2015/03/27 职场文书
领导干部失职检讨书
2015/05/05 职场文书
红楼梦读书笔记
2015/06/25 职场文书
2016年清明节红领巾广播稿
2015/12/17 职场文书