summernote富文本批量上传音频,视频等附件
普通项目,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" /> …...
IDEA如何设置编码格式，字符编码，全局编码和项目编码格式
前言 大家好，我是小徐啊。我们在开发Java项目（Springboot）的时候，一般都是会设置好对应的编码格式的。如果设置的不恰当，容易造成乱码的问题，这是要避免的。今天，小徐就来介绍下我们如何在IDEA…...
【计算机网络实验】之静态路由配置
【计算机网络实验】之静态路由配置 实验题目实验目的实验任务实验设备实验环境实验步骤路由器配置设置静态路由测试路由器之间的连通性配置主机PC的IP测试 实验题目 静态路由协议的配置 实验目的 熟悉路由器工作原理和机制；巩固静态路由理论；设计简单…...
十五届蓝桥杯赛题-c/c++ 大学b组
握手问题 很简单，相互牵手即可，但是要注意，第一个人只能与其他49个人牵手，所以开头是加上49 #include <iostream> using namespace std; int main() {int cnt0;for(int i49;i>7;i--){cnti;//cout<<i<<&quo…...
基础自动化系统的任务
基础自动化系统的任务主要包括实现自动控制、提高生产效率、减少人工干预等。以下是其具体任务的相关介绍： 实现自动控制 控制机器设备：基础自动化系统通过预设的程序和逻辑规则，对机器或设备进行自动控制和运行。执行特定任务：这…...
DBeaver添加地图查看器的自定义底图
DBeaver提供了空间数据在地图上查看的功能，地图查看器技术上基于Leaflet实现。 当我们在表格中选择图形列时，空间数据会叠加在右侧的地图查看器上。 其本质是在缓存中会生成一个静态页面，点击查看器左下角的“在浏览器中打开”，可…...
STM32F103C8T6实时时钟RTC
目录 前言 一、RTC基本硬件结构 二、Unix时间戳 2.1 unix时间戳定义 2.2 时间戳与日历日期时间的转换 2.3 指针函数使用注意事项 三、RTC和BKP硬件结构 四、驱动代码解析 前言 STM32F103C8T6外部低速时钟LSE（一般为32.768KHz）用的引脚是PC14和PC…...
Python Selenium：Web自动化测试与爬虫开发
Python Selenium：Web自动化测试与爬虫开发 Python Selenium：Web自动化测试与爬虫开发安装Selenium设置WebDriver基础示例页面元素交互处理JavaScript和Cookies浏览器控制屏幕截图Headless Mode结束会话错误处理与调试 ***本文由AI辅助生成*** Python Se…...
Java-07 深入浅出 MyBatis - 一对多模型 SqlMapConfig 与 Mapper 详细讲解测试
点一下关注吧！！！非常感谢！！持续更新！！！ 大数据篇正在更新！https://blog.csdn.net/w776341482/category_12713819.html 目前已经更新到了： MyBatisÿ…...
用CAXA CAD电子图板导入图框、标题栏并导出pdf的方法
1.导入图框： 点击调入图框->出现读入图框文件 一个一个点击，选择合适的图框 然后点击导入 2.导入标题栏： 调入标题栏->出现读入标题栏文件 一个一个点击，选择合适的标题栏，然后点击导入 3.导出pdf&#x…...
深入了解 Linux htop 命令：功能、用法与示例
文章目录 深入了解 Linux htop 命令：功能、用法与示例什么是 htop？htop 的安装htop的基本功能A区：系统资源使用情况B区：系统概览信息C区：进程列表D区：功能键快捷方式 与 top 的对比常见用法与示例实际场景应…...
JDK1.8新增特性
新特性： Lambda表达式: （语法三要素：参数、箭头、代码） JDK1.8引入的一种新语法Lambda表达式,它简化了匿名内部类的使用和提高代码的可读性。 /**正常写法创建Runable**/ Runnable runnable new Runnable() {Overridepublic voi…...
环境背景文本到语音转换
目录 概述演示效果核心逻辑使用方式 概述 本文所涉及的所有资源的获取方式：https://www.aspiringcode.com/content?id100000000027&uid2f1061526e3a4548ab2e111ad079ea8c 论文标题： 本文提出了 VoiceLDM，这是一种旨在生成准确遵循两种…...
后端数据增删改查基于Springboot+mybatis mysql 时间根据当时时间自动填充，数据库连接查询不一致，mysql数据库连接不好用
目录 后端数据增删改查Springboot 实体（entity）类引进添加UserMapper接口 创建对用的UserController注意数据库查询不一致新增数据更新删除postman测试 后端数据增删改查 基于之前构建系统，实现用户数据的CRUD。 打开navicat16，…...
《Python编程实训快速上手》第九天--调试技巧
一、抛异常 异常类型分为两类，第一类是Python自带的异常类型（见《Python编程快速上手》第一天---前三章打基础），第二类是自定义异常。 面对自定义异常类型，使用raise抛异常，类型值默认为Exception&#x…...
html5复习一
目标 1、html5介绍及开发工具 2、html5标签 3、文本样式 4、图片标签和超链接标签 知识点： 万维网的构成： 1、url:统一资源定位器 2、http/https:超文本传输协议 3、html：超文本标记语言 html的后缀名： .html 和 .htm html基本…...
SSL/TLS，SSL，TLS分别是什么
SSL/TLS，SSL，TLS分别是什么 SSL（Secure Sockets Layer，安全套接层） 定义与发展历程： SSL 是一种早期的网络安全协议，旨在为网络通信提供保密性、数据完整性和身份验证等安全保障。它最初由网景…...
css iframe标签使用
<iframe> 标签用于在网页中嵌入另一个 HTML 页面。它非常灵活，可用于嵌入内容，比如其他网站、视频、地图等。以下是有关 <iframe> 的详细介绍及使用方法： 基本语法 <iframe src"URL" width"宽度" height…...
API的妙用
我们都知道，通过使用API可以快速开发部署应用，不需要从头开始收集处理数据。能够很好地提高效率。 一、加速应用程序开发和部署 通过调用API接口，可以快速获取数据、实现功能或整合其他服务，无需从零开始编写大量的代码…...
HTML5超酷响应式视频背景动画特效(六种风格，附源码)
文章目录 1.设计来源1.1 大气蓬勃动态背景界面效果1.2 星空闪闪动态背景界面效果1.3 眼神深眸动态背景界面效果1.4 星空银河动态背景界面效果1.5 花开花落动态背景界面效果1.6 海底世界动态背景界面效果 2.效果和源码2.1 动态效果2.2 源代码 源码下载万套模板，程序开…...
C++_核心编程_多态案例二-制作饮品
#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为：煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例，提供抽象制作饮品基类，提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...
java_网络服务相关_gateway_nacos_feign区别联系
1. spring-cloud-starter-gateway 作用：作为微服务架构的网关，统一入口，处理所有外部请求。 核心能力： 路由转发（基于路径、服务名等）过滤器（鉴权、限流、日志、Header 处理）支持负…...
Mybatis逆向工程，动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件
今天呢，博主的学习进度也是步入了Java Mybatis 框架，目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学，希望能对大家有所帮助，也特别欢迎大家指点不足之处，小生很乐意接受正确的建议&…...
可靠性+灵活性：电力载波技术在楼宇自控中的核心价值
可靠性灵活性：电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中，电力载波技术（PLC）凭借其独特的优势，正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据，无需额外布…...
YSYX学习记录（八）
C语言，练习0： 先创建一个文件夹，我用的是物理机： 安装build-essential 练习1： 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件，随机修改或删除一部分，之后…...
【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力
引言： 在人工智能快速发展的浪潮中，快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型（LLM）。该模型代表着该领域的重大突破，通过独特方式融合思考与非思考…...
ESP32 I2S音频总线学习笔记（四）： INMP441采集音频并实时播放
简介 前面两期文章我们介绍了I2S的读取和写入，一个是通过INMP441麦克风模块采集音频，一个是通过PCM5102A模块播放音频，那如果我们将两者结合起来，将麦克风采集到的音频通过PCM5102A播放，是不是就可以做一个扩音器了呢…...
spring：实例工厂方法获取bean
spring处理使用静态工厂方法获取bean实例，也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下： 定义实例工厂类（Java代码），定义实例工厂（xml），定义调用实例工厂ÿ…...
uniapp微信小程序视频实时流+pc端预览方案
方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度WebSocket图片帧定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐RTMP推流TRTC/即构SDK推流❌ 付费方案 （部分有免费额度&#x…...
工业自动化时代的精准装配革新：迁移科技3D视觉系统如何重塑机器人定位装配
AI3D视觉的工业赋能者 迁移科技成立于2017年，作为行业领先的3D工业相机及视觉系统供应商，累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成，通过稳定、易用、高回报的AI3D视觉系统，为汽车、新能源、金属制造等行…...