上传文件方法

form表单中

<div class="layui-upload">
 <input  class="layui-input" style="width: 560px;margin-left: 110px;" disabled="" value="注意:同时最多选择三个文件,同时最多上传三个文件,上传完三个即可再选再上传">
 
  <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="file" class="filess layui-input" value="" type="hidden">

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;

js文件

 var navArr  = [];   //定义一个数组 用于存储 传过来的 上传文件的路径


   //演示多文件列表
  var uploadListIns = upload.render({
    elem: '#testList'
    ,elemList: $('#demoList') //列表元素对象
    ,url: '{:url("upload")}' 
    ,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 即为返回的进度百分比
    }
  });

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值