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 源代码 源码下载万套模板，程序开…...
Spire.PDF for .NET【页面设置】演示：打开 PDF 时自动显示书签或缩略图
用户打开 PDF 文档时，他们会看到 PDF 的初始视图。默认情况下，打开 PDF 时不会显示书签面板或缩略图面板。在本文中，我们将演示如何设置文档属性，以便每次启动文件时都会打开书签面板或缩略图面板。 Spire.PDF for .NET 是一款独…...
算法中常用到的数学知识：埃拉托色尼筛法(获取质数)、欧几里得算法(求两个数最大公因数)
不管是在项目中还是面试时，一定的算法能力都是极其重要的。大多数算法只要有一定的基础，给足够的时间是可以写出来的，然而有一类算法，说难也不难，说简单也不简单，这种算法通常涉及到某种数学知识࿰…...
实战OpenCV之人脸识别
基础入门 随着计算机视觉技术和深度学习的发展，人脸识别已经成为一项广泛应用的技术，涵盖了从安全监控、身份验证、智能家居到大型公共安全项目等多个领域。 人脸识别技术通常包括以下几个主要步骤。 图像采集：通过摄像头或其他图像采集设备，捕获包含人脸的图像或视频帧。 …...
图像预处理之图像滤波
目录 图像滤波概览 均值滤波（Mean Filter） 中值滤波（Median Filter） 高斯滤波（Gaussian Filter） 双边滤波（Bilateral Filter） 方框滤波（Box Filter） S…...
【通俗理解】隐变量的变分分布探索——从公式到应用
【通俗理解】隐变量的变分分布探索——从公式到应用 关键词提炼 #隐变量 #变分分布 #概率模型 #公式推导 #期望最大化 #机器学习 #变分贝叶斯 #隐马尔可夫模型 第一节：隐变量的变分分布的类比与核心概念【尽可能通俗】 隐变量的变分分布就像是一场“捉迷藏”游戏…...
PyTorch 分布式并行计算
0. Abstract 使用 PyTorch 进行多卡训练, 最简单的是 DataParallel, 仅仅添加一两行代码就可以使模型在多张 GPU 上并行地计算. 但它是比较老的方法, 官方推荐使用新的 Distributed Data Parallel, 更加灵活与强大: 1. Distributed Data Parallel (DDP) 从一个简单的非分布…...
[cg] vulkan external_memory
最近在写硬件编码的代码，渲染器渲染出的RT需要给到编码器做硬编，有两种方法能做。 一是通过 map的方式，把显存里的数据读到cpu，拷贝一份cpu data给编码器，但这种方式会有内存拷贝的开销。所以，我们思考是否…...
如何使用Python代码实现给GPU预加热
如何使用Python代码实现给GPU预加热 一、引言二、使用深度学习框架进行预加热2.1 TensorFlow预加热2.2 PyTorch预加热三、使用CUDA进行预加热四、预加热的效果评估与优化五、结论与展望在高性能计算和深度学习领域，GPU（图形处理器）已经成为不可或缺的加速工具。然而，在实际…...
硬件知识 cadence16.6 原理图输出为pdf 网络名下划线偏移 （ORCAD）
1. cadence原理图输出为PDF网络名下划线偏移 生这种情况的原因 1. 设计的原理图图纸大小比正常的 A4图纸大。 2. 打印为PDF 的时候，打印机的设置有问题。 2.cadence原理图输出为 PDF网络名下划线偏移的情况 可以看到上图，网络名往上漂移。 3. 解决办法 …...
ffmpeg视频滤镜：提取缩略图-framestep
滤镜描述 官网地址 > FFmpeg Filters Documentation 这个滤镜会间隔N帧抽取一帧图片，因此这个可以用于设置视频的缩略图。总体上这个滤镜比较简单。 滤镜使用 滤镜参数 framestep AVOptions:step <int> ..FV....... set frame st…...