html页面的代码(注意:引入layui相关的css):

<div class="layui-upload" style="margin-left: 130px">
<button type="button" class=" layui-btn" id="choiceList"><i class="iconfont icon-e645"></i>选择多文件</button>
<div class="layui-upload-list layui-upList-minHeight">
<table class="layui-table">
<thead>
<tr>
<th>文件名</th>
<th>大小</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody id="demoList">
<tr id="upload">
<td>xxx.txt</td>
<td>xxxkb</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" disabled>删除</button></td>
</tr>
</tbody>
</table>
</div>
<!-- <div class="layui-form-item layui-btn-Center">
<div class="layui-input-block text-right">
<button type="button" class="layui-btn layui-btn-xs" id="choiceListAction">开始上传</button>
<button class="btn layui-btn layui-btn-xs layui-btn-primary js_close" id="quXiao" type="button">取消</button>
</div>
</div> --> </div>

  js的编写(引入layui相关的js):

layui.use(['upload','form','layer','laydate'], function(){
var $ = layui.jquery
,upload = layui.upload
,form = layui.form; //多文件列表示例
$(function() {
var uploadFile = {
init: function() {
this.upload();
},
//上传文件
upload: function() {
layui.use('upload', function() {
var $ = layui.jquery,
upload = layui.upload;
//多文件列表示例
var demoListView = $('#demoList'),
uploadListIns = upload.render({
elem: '#choiceList',
url: '__PUBLIC__/static/file/uploadFile',
accept: 'file',
multiple: true,
auto: true,
bindAction: '#choiceListAction',
choose: function(obj) {
var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
//读取本地文件
obj.preview(function(index, file, result) {
if($('#demoList tr td').eq(0).text() == 'xxx.txt') {
$('#demoList').empty();
}
var tr = $(['<tr id="upload-' + index + '">',
'<td>' + file.name + '</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);
}); //删除
tr.find('.demo-delete').on('click', function() {
delete files[index]; //删除对应的文件
tr.remove();
uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值,以免删除后出现同名文件不可选
});
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('<span style="color: #5FB878;">上传成功</span>');
tds.eq(3).html(''); //清空操作
return delete this.files[index]; //删除文件队列已经上传成功的文件 }
this.error(index, upload, res.msg);
},
error: function(index, upload, msg) {
var tr = demoListView.find('tr#upload-' + index),
tds = tr.children();
tds.eq(2).html('<span style="color: #FF5722;">' + msg + '</span>');
tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
}
});
});
} }
uploadFile.init();
}); });

  效果图

layui的多文件列表上传功能前端代码的更多相关文章

  1. Vue实现多文件上传功能(前端 + 后端代码)

    本人业余前端开发,因为公司(很坑)觉得我很牛逼,所以让我前后端一起玩,无奈的我只能磕磕碰碰的研究起了vue. 开发项目的时候,用到文件上传的功能很常见,包括单文件上传和多文件上传,上传各种类型的文件. ...

  2. 020 文件(图片)上传功能---涉及switchhost和Nginx的使用

    文件的上传并不只是在品牌管理中有需求,以后的其它服务也可能需要,因此我们创建一个独立的微服务,专门处理各种上传. 1.搭建模块 (1)创建模块 (2)依赖 我们需要EurekaClient和web依赖 ...

  3. layui+springmvc实现文件异步上传

    一.单文件上传 前端代码 <div class="layui-upload"> <div class="layui-upload-list"& ...

  4. java+web文件的上传和下载代码

    一般10M以下的文件上传通过设置Web.Config,再用VS自带的FileUpload控件就可以了,但是如果要上传100M甚至1G的文件就不能这样上传了.我这里分享一下我自己开发的一套大文件上传控件 ...

  5. jfinal layui easyexcel 实现文件的上传下载

    jfinal  layui easyexcel  这三样开源技术这里就不多介绍了,自行百度了解吧,他们的组合算是一个很高效又不失美观的操作体验. 操作主要分以下几步: 1.建立jfinal的操作环境, ...

  6. java文件分片上传,断点续传

    百度的webUploader的前端开源插件实现的大文件分片上传功能 前端部分 前端页面代码如下,只需要修改自己的文件上传地址接口地址: <!DOCTYPE html> <html l ...

  7. layui文件单文件和多文件的上传、预览以及删除和修改

    活不多说,直接上代码 单文件上传 1.HTML <blockquote class="layui-elem-quote layui-quote-nm" style=" ...

  8. 文件/大文件上传功能实现(JS+PHP)全过程

    文件/大文件上传功能实现(JS+PHP) 参考博文:掘金-橙红年代 前端大文件上传 路漫漫 其修远 PHP + JS 实现大文件分割上传 本文是学习文件上传后的学习总结文章,从无到有实现文件上传功能, ...

  9. 使用element的upload组件实现一个完整的文件上传功能(上)

    说到标题就有点心塞了,前段时间项目上需要实现一个文件上传的功能,然后就咔咔的去用了element的upload组件,不用不知道一用吓一跳哇. 在使用的过程中遇到了很多让意想不到的问题,后来也因为时间问 ...

随机推荐

  1. spring的HandlerMapping

    handerlMapping意思是处理器映射,是把请求的url地址与方法进行映射,如SimpleUrlHandlerMapping.

  2. Ad_hoc_polymorphism 备份

    https://en.wikipedia.org/wiki/Polymorphism_(computer_science) https://en.wikipedia.org/wiki/Ad_hoc_p ...

  3. Map使用操作系统内存的情况

    public static void main(String[] args) { System.out.println("程序启动-->可用内存:"+(getSystemMe ...

  4. VMware虚拟机共享文件夹问题: /mnt下没有hgfs文件夹

    在使用vmware虚拟机共享文件夹功能的时候,发现在/mnt目录下面没有hgfs文件夹,但是vmware-tool的命令vmhgfs-fuse确实存在于系统中.在使用vmhgfs-fuse建立宿主机到 ...

  5. Flex元素布局规则总结,以及布局和容器

    一.Flex中的元素分类从功能层面可以把Flex中的元素分为组件(Components)和容器(Containers)两大类:组件 - 是指那类具有明确交互或数据展示功能的元素,例如Button.Ch ...

  6. 路飞学城Python-Day186

    Evernote Export 持续集成 持续集成,简单的说就是持续集成频繁的将代码集成到主干,它的好处主要有1.快速发现错误,没完成一点更新,就集成到主干,可以快速发现错误,定位错误也会比较容易,2 ...

  7. Vue学习之路第十四篇:v-for指令中key的使用注意事项

    1.学前准备: JavaScript中有一个方法:unshift() ,其作用是向数组的开头添加一个或更多元素,并返回新的长度.该方法的第一个参数将成为数组的新元素 0,如果还有第二个参数,它将成为新 ...

  8. 51nod-活动安排问题

    有若干个活动,第i个开始时间和结束时间是[Si,fi),只有一个教室,活动之间不能交叠,求最多安排多少个活动?分析: 我们就是想提高教室地利用率,尽可能多地安排活动.考虑容易想到的几种贪心策略: (1 ...

  9. 朴素贝叶斯(Naive Bayesian)

    简介 Naive Bayesian算法 也叫朴素贝叶斯算法(或者称为傻瓜式贝叶斯分类) 朴素(傻瓜):特征条件独立假设 贝叶斯:基于贝叶斯定理 这个算法确实十分朴素(傻瓜),属于监督学习,它是一个常用 ...

  10. Strtus配置Tomcat出现问题

    在使用 eclipse 过程中,如果你加入了某些自定义的框架(比如 struts)后,在启动 services 后, 控制台出现一片红色的字样,表明有问题.这时仔细查看 eclipse 控制台信息, ...