【layui】多文件上传组件实现

插件预览效果:

需要引入layui的脚本文件layui.js和样式文件layui.css

html代码:

<div class="layui-input-block"><div class="layui-upload-list"><table class="layui-table"><colgroup><col style="min-width: 100px;"><col width="150"><col width="260"><col width="150"></colgroup><thead><tr><th>文件名</th><th>大小</th><th>上传进度</th><th>操作</th></tr></thead><tbody id="ID-upload-demo-files-list"></tbody></table></div><button type="button" class="layui-btn layui-btn-normal" id="upload">选择多文件</button><button type="button" class="layui-btn" id="ID-upload-demo-files-action">开始上传</button>
</div>

脚本代码:

//初始化组件
var uploadListIns = upload.render({elem: '#upload',elemList: $('#ID-upload-demo-files-list'), // 列表元素对象url: '/FileManage/Uploadfile/Upload', // 实际使用时改成您自己的上传接口即可。accept: 'file',multiple: true,number: 10,auto: false,bindAction: '#ID-upload-demo-files-action',data: { filetype: 3 },//接口参数choose: function (obj) {var that = this;var files = this.files = obj.pushFile(); // 将每次选择的文件追加到文件队列console.log('obj.pushFile()', obj.pushFile())// 读取本地文件obj.preview(function (index, file, result) {var tr = $(['<tr id="upload-' + index + '">','<td>' + file.name + '</td>','<td>' + (file.size / 1024).toFixed(1) + 'kb</td>','<td class="progressContent"><div class="layui-progress" lay-filter="progress-demo-' + index + '"><div class="layui-progress-bar" lay-percent=""></div></div></td>','<td class="operate">',// '<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(''));// 单个重传$("body").delegate('#upload-' + index + " .demo-reload", "click", function () {var progress = '<div class="layui-progress" lay-filter="progress-demo-' + index + '"><div class="layui-progress-bar" lay-percent=""></div></div>'element.progress('progress-demo-' + index, '0%');obj.upload(index, file);});// 删除$("body").delegate(".demo-delete", "click", function () {delete files[index]; // 删除对应的文件tr.remove(); // 删除表格行// 清空 input file 值,以免删除后出现同名文件不可选uploadListIns.config.elem.next()[0].value = '';});that.elemList.append(tr);element.render('progress'); // 渲染新加的进度条组件});},done: function (res, index, upload) { // 成功的回调var that = this;if (res.code == 0) { // 上传成功console.log('done-success', res, index, upload)var tr = that.elemList.find('tr#upload-' + index)var tds = tr.children();tds.eq(3).html(''); // 清空操作var td = $(['<button class="layui-btn layui-btn-xs table-preview " onclick="showAnnex(\'' + res.data[0].src + '\')">下载</button>','<button class="layui-btn layui-btn-xs layui-btn-danger table-delete">删除</button>'].join(''));$("#upload-" + index).find(".operate").empty();// console.log('$("#" + index).find(".operate")', $("#" + index).find(".operate"))$("#upload-" + index).find(".operate").append(td);$("#upload-" + index).attr("data-src", res.data[0].src)fileList.push({src: res.data[0].src,name: this.files[index].name,size: res.data[0].size,})console.log('fileList', fileList)delete this.files[index]; // 删除文件队列已经上传成功的文件return;}else {console.log('done', res, index, upload)var td = $(['<button class="layui-btn layui-btn-xs demo-reload ">重传</button>','<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'].join(''));$("#upload-" + index).find(".operate").empty();// console.log('$("#" + index).find(".operate")', $("#" + index).find(".operate"))$("#upload-" + index).find(".operate").append(td);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);var 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 即为返回的进度百分比}
});
//删除按钮事件
$("body").delegate(".table-delete", "click", function () {let src = $(this).parents('tr').attr("data-src")console.log('delete', src)let deleteIndex = -1;fileList.forEach(function (item, index) {if (item.src == src) {deleteIndex = index}})if (deleteIndex != -1) {fileList.splice(deleteIndex, 1)}$(this).parents('tr').remove();
});
//开始上传按钮事件
$("body").delegate("#ID-upload-demo-files-action", "click", function () {$("#ID-upload-demo-files-list tr").each(function (index, item) {if ($(item).attr("data-src") == undefined || $(item).attr("data-src") == 'undefined') {$(item).find(".operate").empty();}// console.log(' $(item).attr("src")', $(item).attr("data-src"))});
})

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/54966.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

easyexcel多sheet导出(唯一能用)

1&#xff0c;response流header, contentType等设置跟单sheet一样 2&#xff0c;上代码 Data public class SheetModel<T> { private String sheetName; private Class<T> clazz; private List<T> data; } ExcelWriter writer EasyExcel.write(resp.ge…

vue3中如何更改当前类的文件名称

首先&#xff0c;使用script指定文件名称 <template><div class"person"><h2>姓名&#xff1a;{{ name }}</h2><h2>年龄&#xff1a;{{ age }}</h2><button click"showTel">查看联系方式</button><bu…

VS2017 编译 SQLite3 动态库

首先官方下载源码: Tags sqlite/sqlite (github.com) 1.安装 VS2017 community edition 2.打开VS2017命令行工具 3.安装TCL 开发库,推荐 TCL 9.0 先下载源码: Tcl/Tk 9.0 使用vs2017编译tcl&

【STM32-HAL库】实现微秒、毫秒、纳秒延时。(STM32F4系列)(附带工程下载链接)

使用了本代码后不能使用HAL库自带的HAL_Delay函数 使用了本代码后不能使用HAL库自带的HAL_Delay函数 使用了本代码后不能使用HAL库自带的HAL_Delay函数 一、新建工程 可以参考我的新建工程系列教程 stm32-HAL库cubeMX新建工程教程&#xff08;以F103C8T6为例&#xff09;ht…

基于IDEA+SpringBoot+Vue+Uniapp的投票评选小程序系统的详细设计和实现

2. 详细视频演示 文章底部名片&#xff0c;联系我获取更详细的演示视频 3. 论文参考 4. 项目运行截图 代码运行效果图 代码运行效果图 代码运行效果图 代码运行效果图 代码运行效果图 5. 技术框架 5.1 后端采用SpringBoot框架 Spring Boot 是一个用于快速开发基于 Spring 框…

Flink 批作业如何在 Master 节点出错重启后恢复执行进度?

摘要&#xff1a;本文撰写自阿里云研发工程师李俊睿&#xff08;昕程&#xff09;&#xff0c;主要介绍 Flink 1.20 版本中引入了批作业在 JM failover 后的进度恢复功能。主要分为以下四个内容&#xff1a; 背景解决思路使用效果如何启用 一、背景 在 Flink 1.20 版本之前&am…

问:JVM的垃圾收集算法你知道哪些,有什么区别?

GC&#xff08;垃圾回收器&#xff09;的概念 GC&#xff0c;即垃圾回收&#xff08;Garbage Collection&#xff09;&#xff0c;是计算机程序中一种自动管理内存的机制。其目的是自动回收不再被使用的对象所占用的内存空间&#xff0c;从而避免内存泄漏和内存溢出&#xff0…

帮助,有奖提问

<?php $u $_GET[“user”]; //变量获取 $v $_GET[“variable”]; //$v看flag&#xff0c;绕过正则 $flag‘flag{}; if(isset($u)&&(file_get_contents($u,‘r’)“im admin”)){//猜测data://协议 //检查u指向 echo “hello admin!<br>”; if(preg_…

extern “C“ 的作用、C++ 和 C 编译的不同、C++ 编译过程的五个主要阶段

在 C 中&#xff0c;如果需要从 C 语言导入函数或与 C 代码交互&#xff0c;需要使用 extern "C" 关键字。这是因为 C 和 C 在编译过程中的 符号命名机制&#xff08;即 "名称修饰" 或 "name mangling"&#xff09;不同。 1. extern "C&qu…

2014年国赛高教杯数学建模D题储药柜的设计解题全过程文档及程序

2014年国赛高教杯数学建模 D题 储药柜的设计 储药柜的结构类似于书橱&#xff0c;通常由若干个横向隔板和竖向隔板将储药柜分割成若干个储药槽(如图1所示)。为保证药品分拣的准确率&#xff0c;防止发药错误&#xff0c;一个储药槽内只能摆放同一种药品。药品在储药槽中的排列…

[实时计算flink]双流JOIN语句

Flink SQL支持对动态表进行复杂而灵活的连接操作&#xff0c;本文为您介绍如何使用双流JOIN语句。 背景信息 实时计算的JOIN和传统批处理JOIN的语义一致&#xff0c;都用于将两张表关联起来。区别为实时计算关联的是两张动态表&#xff0c;关联的结果也会动态更新&#xff0c…

【Bug】docker容器之间网络通讯失败

目录 报错起因报错内容解决方案 报错起因 我启动了Milvus数据库 # docker ps CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS …

Android Studio 打包aar丢失远程依赖问题解决

之前打包&#xff0c;使用的com.kezong.fat-aar&#xff0c;embed&#xff08;‘XXXX’&#xff09;的方式&#xff0c;可以使三方依赖打包在aar包里&#xff0c;在项目里直接使用 升级了Gradle&#xff1a;7.5后&#xff0c;打包就打包不起来了&#xff0c;一直报错&#xff…

docker-compos安装部署elasticsearch和kibana

elasticsearch和kibana安装部署 version: "3.4" services:elasticsearch:image: docker.das-security.cn/middleware/elasticsearch:7.17.18container_name: elasticsearchenvironment:- discovery.typesingle-node- xpack.security.enabledtrue- xpack.security.au…

【机器学习】金融预测 —— 风险管理与股市预测

我的主页&#xff1a;2的n次方_ 在金融领域&#xff0c;机器学习&#xff08;ML&#xff09;已经成为了不可或缺的工具。金融预测&#xff0c;尤其是风险管理和股市预测&#xff0c;涉及海量数据和复杂模式的分析&#xff0c;而这些正是机器学习擅长处理的领域。通过分析历…

Sentinel最全笔记,详细使用步骤教程清单

一、Sentinel的基本功能 1、流量控制 流量控制在网络传输中是一个常用的概念&#xff0c;它用于调整网络包的发送数据。然而&#xff0c;从系统稳定性角度考虑&#xff0c;在处理请求的速度上&#xff0c;也有非常多的讲究。任意时间到来的请求往往是随机不可控的&#xff0c;…

FLINK SQL时间属性

Flink三种时间属性简介 在Flink SQL中&#xff0c;时间属性是一个核心概念&#xff0c;它主要用于处理与时间相关的数据流。Flink支持三种时间属性&#xff1a;事件时间&#xff08;event time&#xff09;、处理时间&#xff08;processing time&#xff09;和摄入时间&#…

2025 - 中医学基础 - 考研 - 职称

2025 - 中医学基础 - 考研 - 职称 第1章 中医学导论 1.中医学的指导思想是&#xff08;&#xff09;( ) [单选] A&#xff0e;阴阳学说 B&#xff0e;五行学说 C&#xff0e;精气学说 D&#xff0e;整体观念 E&#xff0e;辨证论治 正确答案: D 2.中医学的理论核心是&…

[单master节点k8s部署]37.微服务(一)springCloud 微服务

微服务架构的一个重要特点是&#xff0c;它与开发中使用的具体编程语言或技术栈无关。每个微服务都可以使用最适合其功能需求的语言或技术来实现。例如&#xff0c;一个微服务可以用Java编写&#xff0c;另一个微服务可以用Python、Go、Node.js等编写。微服务架构允许这种灵活性…

gin如何具体利用Server-Send-Events(SSE)实时推送技术实现消息推送

目录 业务场景 解决方案 1. 轮询 2. WebSocket 3. SSE(Server-Send-Events) 代码实现 总结 业务场景 在抖音、美团等APP中&#xff0c;我们经常会遇到APP内部的消息推送&#xff0c;如关注的人的动态消息推送、点赞评论互动消息推送以及算法推荐消息推送。这些场景都是…