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

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前端实现多图上传的全部知识点,感谢大家对我们的支持。

(0)

相关推荐

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

    php结合layui前端实现多图上传 前端html代码 <div class="layui-upload"> <button type="button" class="layui-btn layui-btn-normal" id="testList">请选择图片</button> <span class="num_pic"></span> <

  • Kindeditor单独调用多图上传实例

    html代码: <input type="button" id="J_selectImage" value="图片上传" /> <div id="J_imageView"> <?php foreach($imgs as $row):?> <div class="img_view"><img class='iYuUpload-View' src='/Upl

  • rxjava+retrofit实现多图上传实例代码

    在看了网上多篇rxjava和retrofit的文章后,大概有了一个初步的认识,刚好要做一个多图上传的功能,就拿它开刀吧.下面的内容将基于之前实现方式和使用rxjava实现之间的异同展开,初次写笔记不喜就喷. 普通版多图上传 由于目前手机照片动辄几M的大小,如果不做处理就直接上传,我就笑笑不说话(给个眼神你自己体会).所以,上传分为两步:对图片进行压缩和请求上传.下面请看伪代码(PS:自己不会写后台,项目后台不能拿来用,所以只能给伪代码了) //图片集合 List<String> imgs =

  • layui多图上传实现删除功能的例子

    在使用layui的多图上传时发现没有删除功能 在网上搜索解决办法时有的感觉太复杂有的不符合自己所需要的所以就自己动手 下面附上代码 HTML: <div class="layui-upload"> <button type="button" class="layui-btn" id="test2">多图片上传</button> <blockquote class="layui

  • layui实现图片虚拟路径上传,预览和删除的例子

    效果如下所示: 前端: <style type="text/css"> #detailTbody tr:hover { background: #fff; } .layui-form-label { width: 110px; } .uploader-list { margin-left: -15px; } .uploader-list .info { position: relative; margin-top: -25px; background-color: blac

  • Vue的移动端多图上传插件vue-easy-uploader的示例代码

    前言 这段时间赶项目,需要用到多文件上传,用Vue进行前端项目开发.在网上找了不少插件,都不是十分满意,有的使用起来繁琐,有的不能适应本项目.就打算自己折腾一下,写一个Vue的上传插件,一劳永逸,以后可以直接使用. 目前vue-easy-uploader已上传到GitHub和NPM,使用起来方便简单,不需要繁琐的配置即可投入生产,不过需要后端配合,实现上传接口. 本项目GitHub地址: https://github.com/quanzaiyu/vue-easy-uploader 本项目NPM地

  • php处理多图上传压缩代码功能

    网上看了一些资料,关于处理图片压缩的,找到的大部分是单图压缩的,要么是单前端或者后端的,所以就自己整了下前后端压缩,并支持多图的压缩图片实例.代码有点多,直接复制到编辑器看会比较清楚 1.先创建的一个简单的上传页面upload.php.先通过前端代码压缩图片,直接上代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport&quo

  • layui实现文件或图片上传记录

    本文为大家分享了layui实现文件或图片上传记录的具体代码,供大家参考,具体内容如下 首先是layui自己的官网关于图片/文件上传的帮助文档: 接下来是我自己的使用记录: 1.首先在js中定义一个全局变量 var uploadListIns; 2.进行赋值 //多文件列表示例 /** * 图片上传 */ layui.use('upload', function(){ var $ = layui.jquery,upload = layui.upload; var demoListView = $(

  • layui(1.0.9)文件上传upload,前后端的实例代码

    因为公司还在使用老版本的layui,文件上传在新版本中全部重写了,这里记录下老版本layui的文件上传. 前端代码:(引入layui相关包) <input type="file" lay-type="file" id="xxxxx" name="file" class="layui-upload-file"> 这里可以参考layui官方文档,有一点需要注意,name属性是必需的,当你选择好文件后

  • tp5使用layui实现多个图片上传(带附件选择)的方法实例

    tp5使用layui实现多个图片上传(带附件选择),如何加载layui在此不详细说明,有需要可以百度 html代码,主要处理都是在jq中,完成方法全部原创,也许不是最简单的,但也能实现效果 {include file="public/header" /} <body> <div class="x-nav"> <span class="layui-breadcrumb"> <a href="&qu

随机推荐