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 cache类代码(php数据缓存类)
Apr 15 PHP
用php的ob_start来生成静态页面的方法分析
Mar 09 PHP
Smarty的配置与高级缓存技术分享
Jun 05 PHP
PHP中文分词 自动获取关键词介绍
Nov 13 PHP
下拉列表多级联动dropDownList示例代码
Jun 27 PHP
PHP5.5和之前的版本empty函数的不同之处
Jun 13 PHP
php使用CURL伪造IP和来源实例详解
Jan 15 PHP
PHP动态输出JavaScript代码实例
Feb 12 PHP
php基于双向循环队列实现历史记录的前进后退等功能
Aug 08 PHP
简单解析PHP程序的运行流程
Jun 23 PHP
PHP环形链表实现方法示例
Sep 15 PHP
PHP实现模拟http请求的方法分析
Dec 20 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生成随机密码
2015/10/30 PHP
php实现mysql数据库连接操作及用户管理
2015/11/08 PHP
thinkPHP中多维数组的遍历方法
2016/01/09 PHP
基于PHP实现商品成交时发送短信功能
2016/05/11 PHP
php处理json格式数据经典案例总结
2016/05/19 PHP
详解ThinkPHP3.2.3验证码显示、刷新、校验
2016/12/29 PHP
php字符集转换
2017/01/23 PHP
PHP7扩展开发之基于函数方式使用lib库的方法详解
2018/01/15 PHP
JS创建优美的页面滑动块效果 - Glider.js
2007/09/27 Javascript
关于event.cancelBubble和event.stopPropagation()的区别介绍
2011/12/11 Javascript
jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
2013/04/10 Javascript
js限制文本框只能输入数字方法小结
2014/06/16 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
2014/06/23 Javascript
Node.js中的事件驱动编程详解
2014/08/16 Javascript
JavaScript Split()方法
2015/12/18 Javascript
JS禁止查看网页源代码的实现方法
2016/10/12 Javascript
js实现横向拖拽导航条功能
2017/02/17 Javascript
一个简易的js图片轮播效果
2017/07/22 Javascript
Vue 2.0学习笔记之Vue中的computed属性
2017/10/16 Javascript
AngularJS中controller控制器继承的使用方法
2017/11/03 Javascript
Vue动态获取width的方法
2018/08/22 Javascript
JSX在render函数中的应用详解
2019/09/04 Javascript
Python版实现微信公众号扫码登陆
2020/05/28 Javascript
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
2020/09/10 Javascript
[40:10]2015国际邀请赛全明星表演赛
2015/08/07 DOTA
[55:32]2018DOTA2亚洲邀请赛 4.4 淘汰赛 EG vs LGD 第二场
2018/04/05 DOTA
python 图片验证码代码分享
2012/07/04 Python
Python3 批量扫描端口的例子
2019/07/25 Python
Python3读取和写入excel表格数据的示例代码
2020/06/09 Python
Python读取二进制文件代码方法解析
2020/06/22 Python
Python实现AES加密,解密的两种方法
2020/10/03 Python
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
2018/05/28 HTML / CSS
世界领先的艺术图书出版社:TASCHEN
2018/07/23 全球购物
尤为Wconcept中国官网:韩国设计师品牌服饰
2019/01/10 全球购物
大学生村官工作总结2015
2015/04/09 职场文书
详解PyTorch模型保存与加载
2022/04/28 Python