开心一笑: 会买水果的狗狗

    关注微信公众号

    QQ群:831045818

    app下载

    当前位置:首页> layui > 技术文档 > 正文
    文件上传 并且包含进度条
    发布时间:2020-05-08 10:18:52.0 浏览次数:

    //由于layui 返回的是进度,无法实现多任务上传进条,因此修改源码即可
    加载layui.js修改upload.js
    找到 l.progress   166行将参数改为
    原l.progress(t,l.item[0]) 改 l.progress(t, l.item[0],o)即可
    参数
    t 为进度1到100;
    l.item[0] 为单击上传的元素 可作禁止重复上传使用
    e 为上传实时数据
    a.chooseFiles 表格 index和文件名称
    layui.all.js 同样

    1.jpg

    上传界面

    <!-- 文件上传 -->
    <div id="uploadFile" style="display:block">
       <div class="layui-upload" style="width:700px;min-height:400px; padding:10px;">
          <button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button>
          <div class="layui-upload-list">
             <table class="layui-table">
                <thead>
                <tr><th>文件名</th>
                   <th>大小</th>
                   <th>进度</th>
                   <th>状态</th>
                   <th>操作</th>
                </tr></thead>
                <tbody id="demoList"></tbody>
             </table>
          </div>
          <button type="button" class="layui-btn" id="testListAction">开始上传</button>
       </div>
    </div>
    
    JS  注layui为全局加载
    //上传
    netdisc.uploadPubic=function(){
    //解决重复上传
       var li =$("#uploadFile").html();
       $("#uploadFile").html(li);
    
       //多文件列表示例
       var demoListView = $('#demoList')
             ,uploadListIns = upload.render({
          elem: '#testList'
          ,url: common.apiPath("uploadNetdisc") //
          ,data:{
             path:common.getUrlParam("path"),
             isName:true,
          }
          ,accept: 'file'
          ,multiple: true
          ,auto: false
          ,bindAction: '#testListAction'    
          ,progress: function(p,b,obj) {
             $("#demoList").find('.layui-progress ').each(function () {
             //重点,进度条,根据上面DOM 进行渲染 
                if ($(this).attr("file") == obj.name) {
                   var lay_filter=$(this).attr("lay-filter");
                   var index=lay_filter.replace("progressBar_","");
                   var tr = demoListView.find('tr#upload-'+ index)
                         ,tds = tr.children();
                   tds.eq(3).html('<span style="color: #FF5722;">'+(obj.size*p/100/1014/1024).toFixed(0)+'MB</span>');
                   tds.eq(4).html("");
                   element.progress(lay_filter, p+'%')//设置页面进度条
                }
             })
          }
          ,choose: function(obj){
             var modelIndex =layer.load();
    
             var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
             demoListView.html(" ");
             for (var key in files) {
                var tr = $(['<tr id="upload-'+ key +'">'
                   ,'<td>'+ files[key].name +' </td>'
                   ,'<td>'+ (files[key].size/1014/1024).toFixed(0) +"."+(files[key].size%1024).toFixed(0)+'M</td>'
                   ,'<td>'+
                   '<div  file="'+files[key].name+'" class="layui-progress layui-progress-big"  lay-filter="progressBar_'+key+'" lay-showpercent="true" style="overflow:hidden">'+
                   '<div  class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>'+
                   '</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" tag="'+ key+'">删除</button>'
                   ,'</td>'
    
                   ,'</tr>'].join(''));
    
                //单个重传
                tr.find('.demo-reload').on('click', function(){
                   obj.upload(key, files[key]);
                });
    
                //删除
                tr.find('.demo-delete').on('click', function(){
                   delete files[ $(this).attr("tag")  ]; //删除对应的文件
                   $("#upload-"+$(this).attr("tag")).remove();
                   uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值,以免删除后出现同名文件不可选
                });
                demoListView.append(tr);
             }
             layer.close(modelIndex)
          },done: function(res, index, upload){
             if(res.code==200){ //上传成功
                var tr = demoListView.find('tr#upload-'+ index)
                      ,tds = tr.children();
                tds.eq(3).html('<span style="color: #5FB878;">上传成功</span>');
                tds.eq(4).html(''); //清空操作
                common.layuiRef("");
                return delete this.files[index]; //删除文件队列已经上传成功的文件
    
             }
             this.error(index, upload);
          }
          ,error: function(index, upload){
             var tr = demoListView.find('tr#upload-'+ index)
                   ,tds = tr.children();
             tds.eq(3).html('<span style="color: #FF5722;">上传失败</span>');
             tds.eq(4).find('.demo-reload').removeClass('layui-hide'); //显示重传
          }
       });
    }


    关注"都市百货" 了解南陵

    微信咨询wanglf2r(不拉群 发广告者勿加)

    0
    0
    上一篇:layui 修改原有框架颜色与窗口布局 上一篇:无为汽车南站班车时间表

    评论已有0

    提交评论

    热门评论

    南陵新闻
    公示公告
    常用查询
    风光南陵
    走出南陵
    友情链接