TP5+layui多文件上传，前端后台代码案例

前端

 
<div class="layui-upload">
  <button style="margin-left: 110px;" type="button" class="layui-btn layui-btn-normal" id="testList">选择文件</button> 
  <div style="margin-left: 110px;"  class="layui-upload-list" style="max-width: 1000px;">
    <table class="layui-table">
      <colgroup>
        <col>
        <col width="150">
        <col width="260">
        <col width="150">
      </colgroup>
      <thead>
        <tr><th>文件名</th>
        <th>大小</th>
        <th>上传进度</th>
        <th>操作</th>
      </tr></thead>
      <tbody id="demoList"></tbody>
    </table>
  </div>

  <button  style="margin-left: 110px;" type="button" class="layui-btn" id="testListAction">开始上传</button>
</div> 

  <input name="filess" class="filess layui-input" value="" type="hidden">

 

JS:

  layui.config({
    base: '__layuiadmin__/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'form', 'upload','laydate' ,'element', 'layer'], function(){
    var $ = layui.$
    ,form = layui.form
  ,upload = layui.upload
  ,element = layui.element
  ,layer = layui.layer
  ,laydate =  layui.laydate;
  
  
  var navArr  = [];   //定义一个数组 用于存储 传过来的 上传文件的路径


   //演示多文件列表
  var uploadListIns = upload.render({
    elem: '#testList'
    ,elemList: $('#demoList') //列表元素对象
    ,url: '{:url("upload2")}' 
    ,accept: 'file'
    ,multiple: true
    ,number: 3
    ,auto: false
    ,bindAction: '#testListAction'
    ,choose: function(obj){   
      var that = this;
      var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
      //读取本地文件
      obj.preview(function(index, file, result){
        var tr = $(['<tr id="upload-'+ index +'">'
          ,'<td>'+ file.name +'</td>'
          ,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
          ,'<td><div class="layui-progress" lay-filter="progress-demo-'+ index +'"><div class="layui-progress-bar" lay-percent=""></div></div></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);
        });
        
        //删除
        tr.find('.demo-delete').on('click', function(){
          delete files[index]; //删除对应的文件
          tr.remove();
          uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
        });
        
        that.elemList.append(tr);
        element.render('progress'); //渲染新加的进度条组件
      });
    }
    ,done: function(res, index, upload){ //成功的回调
      var that = this;
      //if(res.code == 0){ //上传成功
        var tr = that.elemList.find('tr#upload-'+ index)
        ,tds = tr.children();
        tds.eq(3).html(''); //清空操作
        delete this.files[index]; //删除文件队列已经上传成功的文件


   // navArr[]上面外面定义空数组
      navArr.push(res.message); //返回的文件地址 存进数组  
   // console.log(JSON.stringify(navArr))
 
      $(".filess").val(JSON.stringify(navArr));
        // $("filess").attr("value",JSON.stringify(navArr));
 




        // $("filess").attr("value", navArr); //把数组 赋值给input的值 一起传过去

       
        return;
      //}
      this.error(index, upload);
    }
    ,allDone: function(obj){ //多文件上传完毕后的状态回调
    
      console.log(obj)

    }
    ,error: function(index, upload){ //错误回调
      var that = this;
      var tr = that.elemList.find('tr#upload-'+ index)
      ,tds = tr.children();
      tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
    }
    ,progress: function(n, elem, e, index){ //注意：index 参数为 layui 2.6.6 新增
      element.progress('progress-demo-'+ index, n + '%'); //执行进度条。n 即为返回的进度百分比
    }
  });




  //日期
  laydate.render({
    elem: '#date'
  });
    $('.mdeditor').attr('name', 'content');
    
    upload.render({
      elem: '#layuiadmin-upload-useradmin'
      ,url: layui.setter.base + 'json/upload/demo.js'
      ,accept: 'images'
      ,method: 'get'
      ,acceptMime: 'image/*'
      ,done: function(res){
        $(this.item).prev("div").children("input").val(res.data.src)
      }
    });
  })
  </script>

后端接收：

       public function upload2(){
// var_dump(phpinfo());die;
            $base_path = $_SERVER['DOCUMENT_ROOT']."/upload/company/upload2/"; // 接收文件目录 
            $target_path = $base_path .date("Ymds",time()).$_FILES['file']['name'];

            if (move_uploaded_file($_FILES['file']['tmp_name'],$target_path)) {
                $array = array (
                        "code" => "1",
                        "message" =>$target_path
                );
                echo json_encode($array);
            } else {
                $array = array (
                        "code" => "0",
                        "message" => "There was an error uploading the file, please try again!".$_FILES['file']['error']);
                echo json_encode($array);
            }



        }