layui的多文件列表上传功能前端代码
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的多文件列表上传功能前端代码的更多相关文章
- Vue实现多文件上传功能(前端 + 后端代码)
本人业余前端开发,因为公司(很坑)觉得我很牛逼,所以让我前后端一起玩,无奈的我只能磕磕碰碰的研究起了vue. 开发项目的时候,用到文件上传的功能很常见,包括单文件上传和多文件上传,上传各种类型的文件. ...
- 020 文件(图片)上传功能---涉及switchhost和Nginx的使用
文件的上传并不只是在品牌管理中有需求,以后的其它服务也可能需要,因此我们创建一个独立的微服务,专门处理各种上传. 1.搭建模块 (1)创建模块 (2)依赖 我们需要EurekaClient和web依赖 ...
- layui+springmvc实现文件异步上传
一.单文件上传 前端代码 <div class="layui-upload"> <div class="layui-upload-list"& ...
- java+web文件的上传和下载代码
一般10M以下的文件上传通过设置Web.Config,再用VS自带的FileUpload控件就可以了,但是如果要上传100M甚至1G的文件就不能这样上传了.我这里分享一下我自己开发的一套大文件上传控件 ...
- jfinal layui easyexcel 实现文件的上传下载
jfinal layui easyexcel 这三样开源技术这里就不多介绍了,自行百度了解吧,他们的组合算是一个很高效又不失美观的操作体验. 操作主要分以下几步: 1.建立jfinal的操作环境, ...
- java文件分片上传,断点续传
百度的webUploader的前端开源插件实现的大文件分片上传功能 前端部分 前端页面代码如下,只需要修改自己的文件上传地址接口地址: <!DOCTYPE html> <html l ...
- layui文件单文件和多文件的上传、预览以及删除和修改
活不多说,直接上代码 单文件上传 1.HTML <blockquote class="layui-elem-quote layui-quote-nm" style=" ...
- 文件/大文件上传功能实现(JS+PHP)全过程
文件/大文件上传功能实现(JS+PHP) 参考博文:掘金-橙红年代 前端大文件上传 路漫漫 其修远 PHP + JS 实现大文件分割上传 本文是学习文件上传后的学习总结文章,从无到有实现文件上传功能, ...
- 使用element的upload组件实现一个完整的文件上传功能(上)
说到标题就有点心塞了,前段时间项目上需要实现一个文件上传的功能,然后就咔咔的去用了element的upload组件,不用不知道一用吓一跳哇. 在使用的过程中遇到了很多让意想不到的问题,后来也因为时间问 ...
随机推荐
- date 格式化
以这个为例: yyyy-MM-dd HH:mm:ss 首先得写好你需要的模板 options.sign = options.sign || 'yyyy-MM-dd HH:mm:ss'; 其次就可 ...
- Angular CLI 启动 版本ng 4
npm install -g angular-cli ng -v ng new project_name cd project_name ng serve 浏览器打开输入 localhost:4200
- go基础笔记
1.slice:作为参数传递时,传递的是地址,当append时,在新的内存地址分配数据,但是没有返回给原的slice,只能通过返回值的方式赋值给slice2.func(a []int):传递,可以3. ...
- aes加密算法的一个问题
百度“delphi aes”出来的结果,千篇一律,都是相互转载,但是没有人发现EldoS, Alexander Ionov于1998-2001写的ElAes.pas代码,存在一个问题. 相同的key和 ...
- VHDL_LIB之DFF
1 D-Flip-Flop with async reset or set library IEEE; use ieee.std_logic_1164.all; entity FFD is gener ...
- 01--[转]C++强大背后
[转]C++强大背后 2014-01-22 分类:互联网 阅读(9295) 评论(6) 在31年前(1979年),一名刚获得博士学位的研究员,为了开发一个软件项目发明了一门新编程语言,该研究员名为Bj ...
- day27-1 numpy模块
目录 numpy array 一维数组 二维数组(用的最多) np.array和list的区别 获取多维数组的行和列 多维数组的索引 高级功能 多维数组的元素替换 多维数组的合并 通过函数方法创建多维 ...
- 【数据分析学习】Pandas思维导图
点我查看原版
- rabbitMQ学习笔记(七) RPC 远程过程调用
关于RPC的介绍请参考百度百科里的关于RPC的介绍:http://baike.baidu.com/view/32726.htm#sub32726 现在来看看Rabbitmq中RPC吧!RPC的工作示意 ...
- K - The Unique MST
K - The Unique MST #include<iostream> #include<cstdio> #include<cstring> #include& ...