记录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…...
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 实例。 备注：此功…...
实录分享 | Alluxio在AI/ML场景下的应用
欢迎来到【微直播间】，2min纵览大咖观点 本次分享主要包括五个方面： 关于Alluxio；盘点企业在尝试AI时面临的挑战；Alluxio在技术栈中的位置；Alluxio在模型训练&模型上线场景的应用；效果对比࿱…...
Streamlit 讲解专栏（十二）：数据可视化-图表绘制详解（下）
文章目录 1 前言2 使用st.vega_lite_chart绘制Vega-Lite图表2.1 示例1：绘制散点图2.2 示例2：自定义主题样式 3 使用st.plotly_chart函数创建Plotly图表3.1 st.plotly_chart函数的基本用法3.2 st.plotly_chart 函数的更多用法 4 Streamlit 与 Bokeh 结合进…...
Dockerfile 使用教程
1.Dockerfile 1.1 什么是Dockerfile Dockerfile可以认为是 Docker镜像的描述文件，是由一系列命令和参数构成的脚本 。主要作用是 用来构建docker镜像的构建文件 。 通过架构图可以看出通过DockerFile可以直接构建镜像 1.2 Dockerfile解析过程 构建镜像步骤…...
InnoDB的Buffer
一、Buffer内存结构 MySQL 服务器启动的时候就向操作系统申请了一片连续的内存，默认128M，可通过从参数修改。 [server] innodb_buffer_pool_size 268435456 1.1 控制块 控制块包括该页所属的 表空间编号、页号、缓存页在 Buffer Pool 中的地址、链表…...
普洛斯常熟东南数据中心获LEED金级认证及IDCC绿色算力基础设施奖
近日，普洛斯常熟东南数据中心获得美国绿色建筑评估标准体系LEED v4 BDC（建筑设计与建造）金级认证，并获评IDCC2023长三角区域绿色算力基础设施奖。以可持续发展理念为核心，该数据中心从设计规划、开发建设，到…...
RabbitMQ 启动及参数说明
/usr/local/lib/erlang/erts-10.4/bin/beam.smp -W w -A 128 -MBas ageffcbf -MHas ageffcbf -MBlmbcs 512 -MHlmbcs 512 -MMmcs 30 -P 1048576 -t 5000000 -stbt db -zdbbl 128000 -K true – -root /usr/local/lib/erlang -progname erl – -home /var/lib/rabbitmq – -pa /…...
Vite打包性能优化及填坑
最近在使用 Vite4.0 构建一个中型前端项目的过程中，遇到了一些坑，也做了一些项目在构建生产环境时的优化，在这里做一个记录，以便后期查阅。(完整配置在后面) 上面是dist文件夹的截图，里面的内容已经有30mb了ÿ…...
JDBC使用了哪种设计模式
JDK中提供了操作数据库的接口，比如 java.sql.Driver java.sql.Connection java.sql.Statement java.sql.PreparedStatement 不同的数据库厂商提供操作自己数据库的驱动包， 比如mysql public class Driver extends NonRegisteringDriver implements jav…...
JVM-性能优化工具 MAT
一、MAT下载和安装 1、概述 MAT（Memory Analyzer Tool）工具是一款功能强大的]ava堆内存分析器。可以用于查找内存泄漏以及查看内存消耗情况。MAT是基于Eclipse开发的，不仅可以单独使用，还可以作为插件的形式嵌入在Eclipse中使用…...
Python Flask flasgger api文档[python/flask/flasgger]
首先需要安装依赖： pip install flasgger封装swagger.py文件，代码如下： from flasgger import Swagger swagger Swagger() 然后在主应用中（项目入口文件）加入以下代码： from flask import Flask from …...