自学内容网 自学内容网
自学内容网 > 正文

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

🕗 发布于 2024-11-20 08:37 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")
    @ResponseBody
    public 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());
        }
    }

原文地址：https://blog.csdn.net/a8267587/article/details/143889635

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

自学内容网
Copyright © 2015-2024