记录layui数据表格使用文件上传按钮
一、前言
虽然用到这种的情况不多，但是还是记录下
二、相关代码
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/><meta name="renderer" content="webkit"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta http-equiv="Expires" content="0"/><meta http-equiv="Cache-Control" content="no-cache"><title>本地上传</title><link rel="stylesheet" href="../libs/layui/css/layui.css?v=2.8.12"><link rel="stylesheet" href="../libs/bootstrap/bootstrap.min.css"/><link rel="stylesheet" href="../libs/layui/css/layui.css?v=2.8.12"><link rel="stylesheet" href="../assets/css/custom.css?v=1.0.0"/>
</head>
<style>.lay_title {height: 40px;display: -webkit-box; /* display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 */-webkit-box-orient: vertical; /* -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 */-webkit-line-clamp: 2; /* -webkit-line-clamp用来限制在一个块元素显示的文本的行数 */overflow: hidden;}.lay_span {width: 180px;margin-right: 10px;}.lay_span img {margin-top: 5px;width: 145px;height: 100px;}
</style>
<body>
<div class="row"><div class="span12"><div class="box box-default"><!-- box-body --><div class="box-body"><table class="layui-hide" id="lay-table" lay-filter="lay-table"></table></div></div></div>
</div>
<div class="row" id="app"><div class="span12"><div class="box box-default"><div class="box-header with-border"><h3 class="box-title"><div class="dec_1"></div>扫描件</h3></div><div class="box-body" id="scrollBody"><div class="form-group" id="smj_list"><div class="span1-5 lay_span" v-for="(value, key) in jsonArray" :id="value.smjmc"><div class="thumbnail"><div @click="showImg(value.smjmc)"><img :src="value.smjpath" :alt="value.name"><hr><div class="lay_title">{{value.name}}</div></div><div class="lay_btn"><a v-on:click="delFile(value.smjmc)" title="文件删除" style="color: red;"><iclass="fa fa-trash-o fa-lg"></i>删除</a></div></div></div></div></div></div></div>
</div>
<script src="../jquery/jquery-1.12.4.min.js"></script>
<script src="../libs/bootstrap/bootstrap.min.js"></script>
<script src="../libs/layui/layui.js?v=2.8.12"></script>
<script src="../ywgj/vue/vue.min.js" charset="utf-8"></script>
<script src="../common/utils/xy-ui.js?v=20230823"></script>
<script>var imgArr = [];var clList = [{"id": "1711031508929916","isNewRecord": false,"name": "办结单材料","param": {}}, {"id": "2006291937364749", "isNewRecord": false, "name": "有效身份证明", "param": {}}];var uploadURL = '/ucm/ucmAction!postFile.do';var uploadParams = {"loginid": "test_st_a","busitype": "UCM_IMAGE","sysid": "sys_ucm","yab003": "44","aab301": "440000000000"};layui.use(function () {var table = layui.table, upload = layui.upload;// 渲染table.render({elem: '#lay-table',defaultToolbar: '',data: clList,page: true,//开启分页cols: [[ // 表头{field: 'name', title: '材料名称'},{fixed: 'right', title: '操作', templet: function (d) {//数据太多，只取需要的数据，也可以直接把整个行数据传过去var rows = {id: d.id,name: d.name}return '<div class="layui-btn-container">' +'<a type="button" class="layui-btn layui-btn-sm lay-upload-img" lay-value="' + JSON.stringify(rows).replace(/"/g, '"') + '"><i class="layui-icon layui-icon-upload"></i>上传图片</a>' +'<a type="button" class="layui-btn layui-bg-blue layui-btn-sm" lay-value="' + JSON.stringify(rows).replace(/"/g, '"') + '"><i class="layui-icon layui-icon-upload"></i>上传PDF</a>' +'</div>';}}]]});var base64Str;var uploadParam;upload.render({elem: '.lay-upload-img', url: uploadURL, field: 'files', accept: 'images' //只允许上传图片, acceptMime: 'image/jpeg,image/png' // 只筛选 jpg,png 格式图片, exts: 'jpg|png|jpeg'//允许上传的文件后缀。一般结合 accept 属性来设定。, before: function (obj) { // obj 参数同 choose// 如果需要用到行数据，可以这样写// var tableElem = this.item;// uploadParam = JSON.parse(tableElem.attr('lay-value'));$.modal.loading('文件上传中，请稍后……');}//我参数是固定的, data: uploadParams//如果需要用到行数据，可以这样写// , data: {// id:function (){// return uploadParam.id;// },// name:function (){// return uploadParam.name;// }// }//这种写法我没试，也可以这样试试// , data: uploadParam, choose: function (obj) {//预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)obj.preview(function (index, file, result) {base64Str = result;});}, done: function (res) {console.log(res);if (res.error) {return $.modal.msgError("上传统一存储失败，请稍候重试");} else {var dataJson = res.success.data;// 文件上传IDvar fileId = dataJson[0].fileid;// 获取当前行相关数据var tableElem = this.item;var rows = JSON.parse(tableElem.attr('lay-value'));var json = {name: rows.name,smjmc: fileId,smjpath: base64Str}rows.fileId = fileId;imgArr.push(rows);console.log(imgArr);//上传成功后，显示数据app.$data.jsonArray.push(json);$.modal.closeAll();}}});});var app = new Vue({el: '#app', data: {jsonArray: []}, created: function () {var _this = this;},methods: {showImg: function (fileId) {},downFile: function (fileId) {},delFile: function (id, fileId) {$('#' + fileId).remove();}}});
</script>
</body>
</html>三、效果展示
相关文章：
记录layui数据表格使用文件上传按钮
一、前言 虽然用到这种的情况不多，但是还是记录下 二、相关代码 <!DOCTYPE html> <html> <head><meta http-equiv"Content-Type" content"text/html;charsetutf-8"/><meta name"renderer" content&quo…...
c++之枚举
1、背景 在开发代码的过程中，vector类型数组a的index取了一个枚举值CTR，eg：a[CTR]，刚开始以为是map类型，后面看不是，简单的看了下c的enum类型，原来enum按顺序默认为数字。 2、enum简介 2.1、…...
LeetCode 热题 100（七）：105. 从前序与中序遍历序列构造二叉树、14. 二叉树展开为链表
题目一： 105. 从前序与中序遍历序列构造二叉树https://leetcode.cn/problems/construct-binary-tree-from-preorder-and-inorder-traversal/ 思路：依据前序遍历的根左右和中序遍历的左根右， 且根左长度＝左根 代码： …...
机器学习笔记 - 在表格数据上应用高斯混合GMM和网格搜索GridSearchCV提高分类精度的机器学习案例
1、需求及数据集说明 这是一项二分类任务，评估的是分类准确性（正确预测的标签百分比）。训练集有1000个样本，测试集有9000个样本。你的预测应该是一个9000 x 1的向量。您还需要一个Id列（1到9000），并且应该包括一个标题。格式如下所示： Id,Solution 1,0 2,1 3,1 ... 900…...
【UE 材质】模型部分透明
材质节点如下，这里简单解释一下。首先通过“Mask”节点将"Texture Coordinate" 节点中的“G”通道分离出来，然后通过“if”节点进行判断，当值小于0.5时为透明，当颜色不小于5时为不透明。可以通过一个参数来控制模型透明…...
Web3 社交平台如何脱颖而出？我们和 PoPP 聊了聊
能够颠覆 Web2 传统模式的社交产品有着怎样的特征？PoPP 作为专注于 Web3 的私域流量变现平台，为开发者和用户提供了社交产品发展的新路径，让社区用户充分实现互动交流，着力于创作内容的激励与变现。事实上，面对 Web3 社…...
【Android】ARouter新手快速入门
什么是ARouter ARouter是阿里巴巴推出的一款android界面路由框架 ARouter解决的核心问题是什么 在大型的模块化项目中，一个模块，往往无法直接访问到其它模块中的类，必须通过其它方式来完成模块间的调用 ARouter的核心功能在于，…...
基于VUE3+Layui从头搭建通用后台管理系统（前端篇）十一：通用表单组件封装实现
一、本章内容 本章实现通用表单组件，根据实体配置识别实体属性，并自动生成编辑组件，实现对应数据填充、校验及保存等逻辑。 1. 详细课程地址： 待发布 2. 源码下载地址： 待发布 二、界面预览 三、开发视频 3.1 B站视频地址：...
Oracle Scheduler学习
参考文档： Primary Note: Overview of Oracle Scheduler (Doc ID 1485539.1) Oracle Database Administrators Guide 12c Release 1 (12.1) E17636-21 Chapter(30) Administering Oracle Scheduler Examples of Using the Scheduler http://docs.oracle.com/cd/E166…...
用户体验地图是什么？UX设计心得分享
大家好，我是设计师l1m0身。本篇文章是关于UX设计中的用户体验地图。 对于新手设计师来说，建立用户体验地图会有一些难度。本篇文章中，我会以简单、易懂的语言分享UX设计师如何制作用户体验地图，希望对你的日常项目体验提升有所帮…...
vue3动态路由警告问题
{ path: "/:pathMatch(.*)*", // 必备 component: () > import("/views/error/404.vue"), }, 路由里添加...
17 Linux之大数据定制篇-Shell编程
17 Linux之大数据定制篇-Shell编程 文章目录 17 Linux之大数据定制篇-Shell编程17.1 Shell编程简介17.1.1 为什么要学习Shell编程17.1.2 Shell是什么17.1.3 执行Shell脚本 17.2 Shell的变量17.2.1 Shell变量介绍17.2.2 设置环境变量17.2.3 位置参数变量17.2.4 预定义变量 17.3 …...
SpringBoot集成WebSocket
SpringBoot集成WebSocket 项目结构图 项目架构图 前端项目 socket.js 注意前端这里的端口是9000, 路劲是ws开头 function createScoket(token){var socket;if(typeof(WebSocket) "undefined") {console.log("您的浏览器不支持WebSocket");}else{var ho…...
Linux服务器部署JavaWeb后端项目
适用于：MVVM前后台分离开发、部署、域名配置 前端：Vue 后端：Spring Boot 这篇文章只讲后端部署，前端部署戳这里 目录 Step1：服务器上搭建后端所需环境1、更新服务器软件包2、安装JDK83、安装MySQL4、登录MySQL5、修…...
原生小程序 wxs 语法（详细）
WXS WXS（WeiXin Script）是内联在 WXML 中的脚本段。通过 WXS 可以在模版中内联少量处理脚本，丰富模板的数据预处理能力。另外， WXS 还可以用来编写简单的 WXS 事件响应函数。 从语法上看， WXS 类似于有少量限制的 Java…...
和count(1)和count(column)使用比较)
MySQL中count(*)和count(1)和count(column)使用比较
分页查询数据，需要返回total，而这个值一般都是通过count函数实现。但是，针对count函数，有多种写法，如count(*)、count(1) 和 count(column)等。本文主要介绍以上几种写法的差异。 注意，这里仅针对MySQL数据…...
python用 xlwings库对Excel进行 字体、边框设置、合并单元格， 版本转换等操作
xlwings 其他的一些单元格读取写入操作网上很多， 下面就写些如何设置单元格的 字体对齐，字体大小、边框， 合并单元格， 这些设置。 import xlwings as xwapp xw.App(visibleTrue, add_bookFalse) app.display_alerts False #…...
Golang 中的 archive/zip 包详解（二）：常用类型
Golang 中的 archive/zip 包用于处理 ZIP 格式的压缩文件，提供了一系列用于创建、读取和解压缩 ZIP 格式文件的函数和类型，使用起来非常方便。 zip.File 类型 定义如下： type File struct {FileHeaderzip *Readerzipr io…...
Qt应用开发(基础篇)——错误提示框 QErrorMessage
一、前言 QErrorMessage类继承于QDialog，是一个用来显示错误信息的对话框。 提示框QDialog 消息对话框 QMessageBox QErrorMessage错误消息对话框提供了一个主文本窗口、一个复选框、一个图标和按钮。文本框用来显示错误信息，复选框用来让用户选择未来是…...
HLS 后端示例
更多 TVM 中文文档可访问 →Apache TVM 是一个端到端的深度学习编译框架，适用于 CPU、GPU 和各种机器学习加速芯片。 | Apache TVM 中文站 TVM 支持带有 SDAccel 的 Xilinx FPGA 板，接下来介绍如何将 TVM 部署到 AWS F1 FPGA 实例。 备注：此功…...
基于算法竞赛的c++编程（28）结构体的进阶应用
结构体的嵌套与复杂数据组织 在C中，结构体可以嵌套使用，形成更复杂的数据结构。例如，可以通过嵌套结构体描述多层级数据关系： struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...
【Axure高保真原型】引导弹窗
今天和大家中分享引导弹窗的原型模板，载入页面后，会显示引导弹窗，适用于引导用户使用页面，点击完成后，会显示下一个引导弹窗，直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...
Cursor实现用excel数据填充word模版的方法
cursor主页：https://www.cursor.com/ 任务目标：把excel格式的数据里的单元格，按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例，…...
【第二十一章 SDIO接口(SDIO)】
第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...
CentOS下的分布式内存计算Spark环境部署
一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架，相比 MapReduce 具有以下核心优势： 内存计算：数据可常驻内存，迭代计算性能提升 10-100 倍（文档段落：3-79…...
《基于Apache Flink的流处理》笔记
思维导图 1-3 章 4-7章 8-11 章 参考资料 源码： https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...
如何理解 IP 数据报中的 TTL？
目录 前言理解 前言 面试灵魂一问：说说对 IP 数据报中 TTL 的理解？我们都知道，IP 数据报由首部和数据两部分组成，首部又分为两部分：固定部分和可变部分，共占 20 字节，而即将讨论的 TTL 就位于首…...
接口自动化测试：HttpRunner基础
相关文档 HttpRunner V3.x中文文档 HttpRunner 用户指南 使用HttpRunner 3.x实现接口自动化测试 HttpRunner介绍 HttpRunner 是一个开源的 API 测试工具，支持 HTTP(S)/HTTP2/WebSocket/RPC 等网络协议，涵盖接口测试、性能测试、数字体验监测等测试类型…...
面试高频问题
文章目录 🚀 消息队列核心技术揭秘：从入门到秒杀面试官1️⃣ Kafka为何能"吞云吐雾"？性能背后的秘密1.1 顺序写入与零拷贝：性能的双引擎1.2 分区并行：数据的"八车道高速公路"1.3 页缓存与批量处理…...
机器学习的数学基础：线性模型
线性模型 线性模型的基本形式为： f ( x ) ω T x b f\left(\boldsymbol{x}\right)\boldsymbol{\omega}^\text{T}\boldsymbol{x}b f(x)ωTxb 回归问题 利用最小二乘法，得到 ω \boldsymbol{\omega} ω和 b b b的参数估计$ \boldsymbol{\hat{\omega}}…...