Layui上传多附件材料代码

基于layui,引入layui.css,layui.js及jquery.js等

 

 
    
  选择多文件 
    
   
    
     
      
      文件名 
      大小 
      状态 
      操作 
      
     
     
    
  
    
  开始上传

 

layui.use('upload', function(){
    var $ = layui.jquery,
    upload = layui.upload;
    var files = [];
    var demoListView = $('#demoList'),
    uploadListIns = upload.render({
    elem: '#testList',
    url: '/file/ftp/upload/',//FTP上传 
    accept: 'file',
    multiple: true,
    auto: false,
    size: 6000, //限制文件大小，单位 KB
    exts: 'jpg|png|xlsx|docx|pdf',//只允许上传文件类型
    bindAction: '#testListAction',
    choose: function(obj){   
        files = obj.pushFile(); //将每次选择的文件追加到文件队列
        //读取本地文件
        obj.preview(function(index, file, result){
        var tr = $(['',
            ''+ file.name +'',
            ''+ (file.size/1014).toFixed(1) +'kb',
            '等待上传',
            '',
            '重传',
            '删除',
            '',
        ''].join(''));
        //单个重传
        tr.find('.demo-reload').on('click', function(){
            obj.upload(index, file);
        });
        //删除
        tr.find('.demo-delete').on('click', function(){
            delete files[index]; //删除对应的文件
            tr.remove();
        });
        demoListView.append(tr);
        });
    },
    done: function(res, index, upload){
        if(res.code == 0){ //上传成功
        var tr = demoListView.find('tr#upload-'+ index),
        tds = tr.children();
        tds.eq(2).html('上传成功');
        tds.eq(3).html(''); //清空操作
        var file_ids = $("input[name='dwyyzzsmj']").val();
        file_ids = file_ids + "//" + res.fileid;
        $("input[name='dwyyzzsmj']").val("");
        $("input[name='dwyyzzsmj']").val(file_ids);
        delete files[index]; //删除文件队列已经上传成功的文件
        return;
        }
        this.error(index, upload);
    },
    error: function(index, upload){
        var tr = demoListView.find('tr#upload-'+ index),
        tds = tr.children();
        tds.eq(2).html('上传失败');
        tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
    }
  });
});