当前位置：首页 > news >正文

summernote富文本批量上传音频,视频等附件

news 来源：原创 2025/7/29 15:22:51

普通项目,HTML的summernote富文本批量上传音频,视频等附件(其他附件同理)

JS和CSS的引入

<head><th:block th:include="include :: summernote-css" />
</head>
<body><th:block th:include="include :: summernote-js" />
</body>

HTML标签

重点:class=“summernote” id=“messageContent”

<div class="col-sm-10"><input type="hidden" class="form-control" name="messageContent"><div class="summernote" id="messageContent"></div></div>

JQ

入口:[‘custom’, [‘myAudio’,‘myVideo’]] // 添加自定义组,一个是音频示例,一个是视频示例
自带的图片(onImageUpload)上传也改成批量上传了.
注意:这里的视频格式只能用H264编码的,不然HTML自带的播放器播放只有声音没画面!!!

$(function() {$('.summernote').summernote({toolbar: [['cleaner',['cleaner']],['style', ['style']],['font', ['bold', 'underline', 'clear']],['fontsize', ['fontsize']],['color', ['color']],['para', ['ul', 'ol', 'paragraph']],['table', ['table']],['insert', ['link','unlink','picture']],['custom', ['myAudio','myVideo']] // 添加自定义组],buttons: {myAudio: function () {var ui = $.summernote.ui;var button = ui.button({contents: '<i class="fa fa-file-audio-o"></i>',tooltip: '音频',click: function () {// 显示文件选择器var input = $('<input>').attr('type', 'file').attr('accept', 'audio/mp3').attr('multiple', '').on('change', function(e) {var files = e.target.files;if (files) {var formData = new FormData();// 遍历文件列表，并将它们添加到FormData对象中$.each(files, function(index, file) {formData.append("files", file);});$.ajax({url: ctx + "common/uploads", // 您的上传端点type: 'POST',data: formData,processData: false,contentType: false,success: function(result) {if (result.code == web_status.SUCCESS) {var urls = result.urls.split(','); // 根据后端定义的分隔符拆分URL字符串// 在编辑器中插入每个图片$.each(urls, function(index, url) {$('#messageContent').summernote('pasteHTML', '<audio src="' + url + '" controls="controls"></audio>');});} else {$.modal.alertError(result.msg);}},error: function(xhr, status, error) {// 处理上传错误$.modal.alertWarning("音频上传失败。");}});}});// 触发文件选择器input.click();}});return button.render();},myVideo: function () {var ui = $.summernote.ui;var button = ui.button({contents: '<i class="fa fa-file-video-o"></i>',tooltip: '视频',click: function () {// 显示文件选择器var input = $('<input>').attr('type', 'file').attr('accept', 'video/mp4').attr('multiple', '').on('change', function(e) {var files = e.target.files;if (files) {var formData = new FormData();// 遍历文件列表，并将它们添加到FormData对象中$.each(files, function(index, file) {formData.append("files", file);});$.ajax({url: ctx + "common/uploads", // 您的上传端点type: 'POST',data: formData,processData: false,contentType: false,success: function(result) {if (result.code == web_status.SUCCESS) {var urls = result.urls.split(','); // 根据后端定义的分隔符拆分URL字符串// 在编辑器中插入每个图片$.each(urls, function(index, url) {$('#messageContent').summernote('pasteHTML', '<div style="width: 320px; height: 240px;"> <video src="' + url + '" controls="controls"></video></div>');});} else {$.modal.alertError(result.msg);}},error: function(xhr, status, error) {// 处理上传错误$.modal.alertWarning("视频上传失败。");}});}});// 触发文件选择器input.click();}});return button.render();}},lang: 'zh-CN',dialogsInBody: true,callbacks: {onChange: function(contents, $edittable) {$("input[name='" + this.id + "']").val(contents);},onImageUpload: function(files) {var formData = new FormData();// 遍历文件列表，并将它们添加到FormData对象中$.each(files, function(index, file) {formData.append("files", file);});var obj = this;$.ajax({type: "post",url: ctx + "common/uploads",data: formData,cache: false,contentType: false,processData: false,dataType: 'json',success: function(result) {if (result.code == web_status.SUCCESS) {var urls = result.urls.split(','); // 根据后端定义的分隔符拆分URL字符串// 在编辑器中插入每个图片$.each(urls, function(index, url) {$('#' + obj.id).summernote('insertImage', url);});} else {$.modal.alertError(result.msg);}},error: function(error) {$.modal.alertWarning("图片上传失败。");}});}}});
});

后端Java代码

就是若依的通用上传请求（多个）代码

	/*** 通用上传请求（多个）*/@PostMapping("/uploads")@ResponseBodypublic AjaxResult uploadFiles(List<MultipartFile> files) throws Exception{try{// 上传文件路径String filePath = RuoYiConfig.getUploadPath();List<String> urls = new ArrayList<String>();List<String> fileNames = new ArrayList<String>();List<String> newFileNames = new ArrayList<String>();List<String> originalFilenames = new ArrayList<String>();for (MultipartFile file : files){// 上传并返回新文件名称String fileName = FileUploadUtils.upload(filePath, file);String url = serverConfig.getUrl() + fileName;urls.add(url);fileNames.add(fileName);newFileNames.add(FileUtils.getName(fileName));originalFilenames.add(file.getOriginalFilename());}AjaxResult ajax = AjaxResult.success();ajax.put("urls", StringUtils.join(urls, FILE_DELIMETER));ajax.put("fileNames", StringUtils.join(fileNames, FILE_DELIMETER));ajax.put("newFileNames", StringUtils.join(newFileNames, FILE_DELIMETER));ajax.put("originalFilenames", StringUtils.join(originalFilenames, FILE_DELIMETER));return ajax;}catch (Exception e){return AjaxResult.error(e.getMessage());}}

summernote富文本批量上传音频,视频等附件

普通项目,HTML的summernote富文本批量上传音频,视频等附件(其他附件同理) JS和CSS的引入 <head><th:block th:include"include :: summernote-css" /> </head> <body><th:block th:include"include :: summernote-js" /> …...

编程日记 2025/7/29 15:22:51

第六十五周周报 UP2ME

文章目录 week 65 UP2ME摘要Abstract1. 题目2. Abstract3. 文献解读3.1 Introduction3.2 创新点 4. 网络结构4.1 单变量预训练4.1.1 样例生成4.1.2 掩码自动编码器预训练4.1.3 即时反应模式 4.2 多元微调4.2.1 稀疏依赖图构造4.2.2 时域频道层 5. 实验结果6. 结论7. 部分关键代…...

编程日记 2025/7/29 15:14:56

Unity 使用 Excel 进行配置管理（读Excel配置表、Excel转保存Txt 文本、读取保存的 Txt 文本配置内容）

Unity 使用 Excel 进行配置管理（读Excel配置表、Excel转保存Txt 文本、读取保存的 Txt 文本配置内容）目录 Unity 使用 Excel 进行配置管理（读Excel配置表、Excel转保存Txt 文本、读取保存的 Txt 文本配置内容）一、简单介绍二、实现原理三、注意事项四、案例简单步…...

编程日记 2025/7/29 15:21:12

【STM32】MPU6050简介

文章目录 MPU6050简介MPU6050关键块带有16位ADC和信号调理的三轴MEMS陀螺仪具有16位ADC和信号调理的三轴MEMS加速度计I2C串行通信接口 MPU6050对应的数据手册：MPU6050 陀螺仪加速度计链接: https://pan.baidu.com/s/13nwEhGvsfxx0euR2hMHsyw?pwdv2i6 提取码: v2i6…...

编程日记 2025/7/29 15:13:53

学习日记_20241123_聚类方法（MeanShift）

前言提醒： 文章内容为方便作者自己后日复习与查阅而进行的书写与发布，其中引用内容都会使用链接表明出处（如有侵权问题，请及时联系）。其中内容多为一次书写，缺少检查与订正，如有问题或其他拓展…...

编程日记 2025/7/29 15:17:37

Qt常用控件按钮

文章目录 1. QAbstractButton 简介2. QPushButton2.1 例子1，设置按钮的图标2.2 例子2，设置按钮快捷键 3. QRadioButton3.1 介绍3.2 例子1，选择性别3.3 例子2，试试其他的信号3.3 例子3，分组 4. QCheckBox4.1 介绍4.2 例…...

编程日记 2025/7/29 15:17:36

医院信息化与智能化系统(22)

医院信息化与智能化系统(22) 这里只描述对应过程，和可能遇到的问题及解决办法以及对应的参考链接，并不会直接每一步详细配置如果你想通过文字描述或代码画流程图，可以试试PlantUML，告诉GPT你的文件结构，让他给你对应…...

编程日记 2025/7/29 15:13:00

嵌入式硬件实战基础篇(二)-稳定输出3.3V的太阳能电池-无限充放电

引言：本内容主要用作于学习巩固嵌入式硬件内容知识，用于想提升下述能力，针对学习稳压芯片和电容以及电池之间的运用，对于硬件PCB以及原理图的练习和前面硬件篇的实际运用；太阳能是一种清洁、可再生的能源，广…...

编程日记 2025/7/28 11:36:48

UE5材质篇5 简易水面

不得不说，UE5里搞一个水面实在是相比要自己写各种反射来说太友好了，就主要是开启一堆开关，lumen相关的，然后稍微连一些蓝图就几乎有了这里要改一个shading model，要这个然后要增加一个这个node 并且不需要连接base …...

编程日记 2025/7/29 15:13:01

Rollup配置实战：多产物与多入口的完美结合 (2)

常用配置多产物配置我们可以将 output 改造成一个数组，对外暴露出不同格式的产物供他人使用，不仅包括 ESM，也需要包括诸如CommonJS、UMD等格式，保证良好的兼容性 import { defineConfig } from rollupexport default defineC…...

编程日记 2025/7/29 15:19:50

iced源码分析

前言 iced是一个比较流行的UI库，设计思路还是挺有意思的，不过因为rust复杂的语法，这个库确实很难让一个不精通rust的开发者那么容易理解。这里记录下这几天的阅读源码心得。正文 iced核心包括四个模块。 iced库，主要控制应用…...

编程日记 2025/7/29 15:15:39

Hadoop的MapReduce详解

文章目录 Hadoop的MapReduce详解一、引言二、MapReduce的核心概念1、Map阶段1.1、Map函数的实现 2、Reduce阶段2.1、Reduce函数的实现三、MapReduce的执行流程四、MapReduce的使用实例Word Count示例1. Mapper类2. Reducer类3. 执行Word Count 五、总结 Hadoop的MapReduce详解…...

编程日记 2025/7/29 15:16:16

【Python系列】字典灵活的数据存储与操作

💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。推荐:kwan 的首页,持续学…...

编程日记 2025/7/29 15:17:35

【MCU】微控制器的编程技术：ISP 与 IAP

在嵌入式领域中，将程序下载到内置 Flash 有两种技术 ISP (In-system programming) ISP 即在系统编程，是指一些可编程逻辑器件、微控制器、芯片组和其他嵌入式设备在安装到完整嵌入式系统后能够进行编程，而不需要在将芯片安装到系统中之前对…...

编程日记 2025/7/29 15:18:16

TCP/IP 协议：网络世界的基石（2/10）

一、引言在当今数字化时代，互联网已经成为人们生活中不可或缺的一部分。而在互联网的背后，TCP/IP 协议扮演着至关重要的角色，堪称互联网的基石。 TCP/IP 协议是一组用于数据通信的协议集合，它的名字来源于其中最重要的两个协议…...

编程日记 2025/7/29 15:13:52

小R的二叉树探险 | 模拟

问题描述在一个神奇的二叉树中，结构非常独特： 每层的节点值赋值方向是交替的，第一层从左到右，第二层从右到左，以此类推，且该二叉树有无穷多层。小R对这个二叉树充满了好奇，她想知道&#xf…...

编程日记 2025/7/28 20:38:36

Redis ⽀持哪⼏种数据类型？适⽤场景，底层结构

目录 Redis 数据类型一、String（字符串） 二、Hash（哈希） 三、List（列表） 四、Set（集合） 五、ZSet(sorted set：有序集合) 六、BitMap 七、HyperLogLog 八、GEO …...

编程日记 2025/7/25 12:08:44

十、事件类型(鼠标事件、焦点.. 、键盘.. 、文本.. 、滚动..)、事件对象、事件流(事件捕获、事件冒泡、阻止冒泡和默认行为、事件委托)

1. 事件类型 1.1 鼠标事件 1.1.1 click 鼠标点击 1.1.2 mouseenter 鼠标进入 1.1.3 mouseleave 鼠标离开 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widt…...

编程日记 2025/7/29 15:19:49

RabbitMQ学习-One

同步调用和异步调用 1.假设我们现在又两个服务，分别是修改商品服务和查询商品服务，每个服务都有自己的数据库； 2.左侧的流程假设我们总共需要耗时40ms； 3.因为不同服务数据库不一样，所以我们就要考虑修改了左边服务的…...

编程日记 2025/7/29 15:13:01

蓝队基础，网络七杀伤链详解

声明！ 学习视频来自B站up主泷羽sec 有兴趣的师傅可以关注一下，如涉及侵权马上删除文章，笔记只是方便各位师傅的学习和探讨，文章所提到的网站以及内容，只做学习交流，其他均与本人以及泷羽sec团队无关&#…...

编程日记 2025/7/25 18:37:29

机器学习实战：银行客户是否认购定期存款

项目结构与步骤 1. 项目概述项目名称：葡萄牙银行电话营销活动分析与定期存款认购预测目标：通过分析银行的电话营销数据，构建模型预测客户是否会认购定期存款。数据来源：葡萄牙银行营销活动数据集关键挑战：数据不平衡…...

编程日记 2025/7/29 14:14:27

【一篇搞定配置】网络分析工具WireShark的安装与入门使用

🌈 个人主页：十二月的猫-CSDN博客 🔥 系列专栏： 🏀各种软件安装与配置_十二月的猫的博客-CSDN博客 💪🏻 十二月的寒冬阻挡不了春天的脚步，十二点的黑夜遮蔽不住黎明的曙光目录 1.…...

编程日记 2025/7/28 23:29:20

气膜场馆照明设计：科技与环保的完美结合—轻空间

气膜场馆的照明设计，选用高效节能的400瓦LED灯具，结合现代节能技术，提供强大而均匀的光照。LED灯具在光效和寿命方面优势显著，不仅降低运营能耗，还有效减少碳排放，为绿色场馆建设贡献力量。科学分布&…...

编程日记 2025/7/29 15:13:02

C语言程序编译和链接

编译环境和运行编译环境也可以称为翻译环境，是将源代码转换为机器可以识别的二进制指令； 运行环境也可以称为执行环境，用于实际执行代码； 翻译环境翻译环境由编译和链接两个部分组成，而编译又可以分解为&#x…...

编程日记 2025/7/27 16:09:50

springBoot整合 Tess4J实现OCR识别文字（图片+PDF）

1. 环境准备 JDK 8 或更高版本Maven 3.6 或更高版本Spring Boot 2.4 或更高版本Tesseract OCR 引擎Tess4J 库 2. 安装 Tesseract OCR 引擎下载地址： Home UB-Mannheim/tesseract Wiki GitHub linux直接安装：sudo apt-get install tesseract-ocr 3.…...

编程日记 2025/7/29 13:10:16

阿里数字人工作 Emote Portrait Alive (EMO)：基于 Diffusion 直接生成视频的数字人方案

TL;DR 2024 年 ECCV 阿里智能计算研究所的数字人工作，基于 diffusion 方法来直接的从音频到视频合成数字人，避免了中间的三维模型或面部 landmark 的需求，效果很好。 Paper name EMO: Emote Portrait Alive - Generating Expressive Portra…...

编程日记 2025/7/27 23:39:41

Java将PDF保存为图片

将 PDF 文件转换为图片是常见的需求之一，特别是在需要将 PDF 内容以图像形式展示或处理时。其中最常用的是 Apache PDFBox。使用 Apache PDFBox Apache PDFBox 是一个开源的 Java 库，可以用来处理 PDF 文档。它提供了将 PDF 页面转换为图像的功能。 …...

编程日记 2025/7/26 7:52:29

医药企业的终端市场营销策略

近年来，随着医药行业的快速发展，终端市场逐渐成为企业竞争的关键领域。在政策趋严、市场环境变化以及数字化转型的大背景下，医药企业如何在终端市场中立于不败之地？本文结合我们在医药数字化领域的经验，为大家剖析终端…...

编程日记 2025/7/29 6:17:36

使用EFK收集k8s日志

首先我们使用EFK收集Kubernetes集群中的日志，本次实验讲解的是在Kubernetes集群中启动一个Elasticsearch集群，如果企业内已经有了Elasticsearch集群，可以直接将日志输出至已有的Elasticsearch集群。文章目录部署elasticsearch创建Kibana创建…...

编程日记 2025/7/23 17:00:52

Vue3 + TypeScript 项目搭建

Vue3 TypeScript 项目搭建环境准备首先确保你的开发环境满足以下要求： # 检查 Node.js 版本 (需要 14.0 或更高版本) node -v# 检查 npm 版本 npm -v# 安装或更新 Vue CLI npm install -g vue/cli创建项目使用 Vue CLI 创建项目： # 创建项目 np…...

编程日记 2025/7/26 21:43:43

Python操作neo4j库py2neo使用（一）

Python操作neo4j库py2neo使用（一） 安装（只用于测试） docker-compose .yml 文件 version: 3.8 services:neo4j:image: neo4j:5.6.0-enterprise #商业版镜像hostname: neo4jcontainer_name: neo4jports:- "7474:7474"-…...

编程日记 2025/7/28 10:36:38

（原创）Android Studio新老界面UI切换及老版本下载地址

前言这两天下载了一个新版的Android Studio，发现整个界面都发生了很大改动： 新的界面的一些设置可参考一些博客： Android Studio新版UI常用设置但是对于一些急着开发的小伙伴来说，没有时间去适应，那么怎么办呢&am…...

编程日记 2025/7/27 10:28:33

Linux——用户级缓存区及模拟实现fopen、fweite、fclose

linux基础io重定向-CSDN博客文章目录目录文章目录什么是缓冲区为什么要有缓冲区二、编写自己的fopen、fwrite、fclose 1.引入函数 2、引入FILE 3.模拟封装 1、fopen 2、fwrite 3、fclose 4、fflush 总结前言用快递站讲述缓冲区收件区（类比输…...

编程日记 2025/7/23 18:03:49

CKA认证 | Day2 K8s内部监控与日志

第三章 Kubernetes监控与日志 1、查看集群资源状态在 Kubernetes 集群中，查看集群资源状态和组件状态是非常重要的操作。以下是一些常用的命令和解释，帮助你更好地管理和监控 Kubernetes 集群。 1.1 查看master组件状态 Kubernetes 的 Master 组件包…...

编程日记 2025/7/29 9:21:18

大模型部署，运维，测试所需掌握的知识点

python环境部署: python3 -m site --user-base 返回用户级别的Python安装基础目录 sudo update-alternatives --install /usr/bin/python3 python3 /usr/bin/python3.8 1 将python3的默认路径/usr/bin/python3替…...

编程日记 2025/7/25 16:19:37

JDBC编程---Java

目录一、数据库编程的前置二、Java的数据库编程----JDBC 1.概念 2.JDBC编程的优点三.导入MySQL驱动包四、JDBC编程的实战 1.创造数据源，并设置数据库所在的位置，三条固定写法 2.建立和数据库服务器之间的连接，连接好了后&#xff…...

编程日记 2025/7/29 1:01:11

什么是沙箱(Sandbox)技术

沙箱技术是一种重要的计算机安全机制，主要用于隔离程序运行环境，以防止恶意代码或应用程序对系统和数据造成破坏。通过限制代码的访问权限和行为，沙箱为程序提供了一个受控且隔离的执行环境。核心特点隔离性沙箱运行的程序被限制在一个受控…...

编程日记 2025/7/27 10:33:05

TCP socket api详解

文章目录 netstat -nltpaccept简单客户端工具 telnet 指定服务连接connect异常处理version 1 单进程版version 2 多进程版version 3 -- 多线程版本version 4 ---- 线程池版本创建套接字socket sockaddr_in结构体 bind 之后就和UDP不一样了。因为TCP是一个面向连接的服务器&…...

编程日记 2025/7/29 2:37:43

Linux——环境变量

环境变量一般指的是在操作系统重用来指定操作系统运行环境的一些参数，这些参数会被bash使用，而bash是被我们用户使用的，也就是说，这些环境变量间接的也是被我们用户使用的。环境变量通常都有某些特殊的用途，它在系统重…...

编程日记 2025/7/29 13:02:11

Windows Pycharm 远程 Spark 开发 PySpark

一、环境版本环境版本PyCharm2024.1.2 (Professional Edition)Ubuntu Kylin16.04Hadoop3.3.5Hive3.1.3Spark2.4.0 二、Pycharm远程开发文件-远程-开发选择 SSH连接，连接虚拟机，选择项目目录即可远程开发...

编程日记 2025/7/25 11:00:46

【es6进阶】vue3中的数据劫持的最新实现方案的proxy的详解

vuejs中实现数据的劫持,v2中使用的是Object.defineProperty()来实现的，在大版本v3中彻底重写了这部分，使用了proxy这个数据代理的方式，来修复了v2中对数组和对象的劫持的遗留问题。 proxy是什么 Proxy 用于修改某些操作的默认行为&#xff0…...

编程日记 2025/7/27 15:29:55

【Isaac Sim】加载自带模型或示例时报 Isaac Sim is not responding

Isaac Sim对电脑配置要求很高，开机第一次打开 Isaac Sim 时，直接就报 Isaac Sim is not responding 卡死了，这是由于第一次需要加载一些资源，耗时会导致 Isaac Sim 无响应，这里等一会会自动给回复。加载自带模型或示…...

编程日记 2025/7/24 15:25:25

React (三)

文章目录项目地址十二、性能优化12.1 使用useMemo避免不必要的计算12.2 使用memo缓存组件，防止过度渲染12.3 useCallBack缓存函数12.4 useCallBack里访问之前的状态（没懂）十三、Styled-Components13.1 安装13.2给普通html元素添加样式13.3 继承和覆盖样式13.4 给react组件添…...

编程日记 2025/7/26 22:50:58

C0031.在Clion中使用mingw编译器来编译opencv的配置方法

mingw编译器编译opencv库的配置方法...

编程日记 2025/7/1 15:07:03

多目标跟踪算法

文章目录一、传统方法1. 基于卡尔曼滤波器的方法1.1 Kalman Filter(卡尔曼滤波器) 2. 基于数据关联的方法2.1 匈牙利算法二、深度学习方法1. 基于检测的多目标跟踪1.1 SORT算法1.2 DeepSort1.3 BoT-SORT 2. 基于特征关联和增强的方法2.1 ByteTrack 3. 基于Transformer的方法3…...

编程日记 2025/7/26 13:46:16

【CSS in Depth 2 精译_059】9.2 把 CSS 模块组合成更大的结构

当前内容所在位置（可进入专栏查看其他译好的章节内容） 【第九章 CSS 的模块化与作用域】 ✔️ 9.1 模块的定义 9.1.1 模块和全局样式9.1.2 一个简单的 CSS 模块9.1.3 模块的变体9.1.4 多元素模块 9.2 将模块组合为更大的结构 ✔️ 9.2.1 模块中多个职责的…...

编程日记 2025/7/27 8:11:41

uniapp+vue3+ts H5端使用Quill富文本插件以及解决上传图片反显的问题

uniappvue3ts H5端使用Quill富文本插件以及解决上传图片反显的问题 1.在项目中安装Quill npm i quill1.3.72.需要显示富文本的页面完整代码 <template><view><div ref"quillEditor" style"height: 65vh"></div></view> &…...

编程日记 2025/7/29 5:12:05