Spring mvc 集成 plupload 上传图片

2024-03-12 19:48
文章标签 java 图片 spring 集成 mvc 上传 plupload

本文主要是介绍Spring mvc 集成 plupload 上传图片，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

plupload

gObjectName = ''
gObjectNames = new Array() //多图片上传保持
currentUrl = window.location.href;
baseBackend = window.location.protocol + "//" +window.location.host;
uploadUrl = 'http://127.0.0.1:8082/';$(document).ready(function() {//上传$('.media-picker').each(function() {var el = $(this);var elbtn = el.find('.media-picker-button');var multiSelection = false;// 上传目录var inputField = el.find('input[type=hidden]');var token = $("meta[name='_csrf']").attr("content");var header = $("meta[name='_csrf_header']").attr("content");console.log(header)// 类型var mediaType = elbtn.attr('data-type');var mimeTypes = [{ title: "Image files", extensions: "jpg,jpeg,gif,png,bmp" },{ title: "Video files", extensions: "mp4,3gp" },{ title: "Video files", extensions: "pdf,doc,docx,ppt,pptx,xls,xlsx,zip,rar" }];if(mediaType == 'video') {mimeTypes = [{ title: "Video files", extensions: "mp4,3gp" }];} else if(mediaType == 'file') {mimeTypes = [{ title: "Video files", extensions: "pdf,doc,docx,ppt,pptx,xls,xlsx,zip,rar" }];} else if(mediaType == 'image') {mimeTypes = [{ title: "Image files", extensions: "jpg,jpeg,gif,png,bmp" }];}// 是否多文件上传if (elbtn.attr('data-multiple') == 'multiple') {multiSelection = true;// 如果已经有文件var oldFiles = inputField.val();if (oldFiles != '') {var oldFilesArr = $.parseJSON(oldFiles);for (var x = 0; x < oldFilesArr.length; x++) {gObjectNames.push(oldFilesArr[x]);}}}var updir = elbtn.attr('data-oss-path');var uploader = new plupload.Uploader({runtimes: 'html5,flash,silverlight,html4',browse_button: elbtn.attr('data-id') + '_uploader',url: 'http://127.0.0.1:8082/backend/upload',file_data_name: 'file',multi_selection: multiSelection,auto_start: true,flash_swf_url: '../plugins/plupload/js/Moxie.swf',silverlight_xap_url: '../plugins/plupload/js/Moxie.xap',//只允许上传图片和zip,rar文件filters: {mime_types: mimeTypes,max_file_size: '50mb', //最大只能上传10mb的文件prevent_duplicates: false //不允许选取重复文件},init: {PostInit: function() {gObjectNames = new Array() //多图片上传保持},FilesAdded: function(up) {uploader.setOption("multipart_params", {"updir": updir, "_csrf": token});up.start(); //选择完后直接上传},FileUploaded: function(up, file, info) {if (info.status == 200) {var fileType = file.type;var isImage = fileType.indexOf('image');var isVideo = fileType.indexOf('video');var isApplication = fileType.indexOf('application');// 获取返回德数据var fileInfos = $.parseJSON(info.response);if(fileInfos.error == 0) {var fileUrl = fileInfos.url;if (multiSelection) {// 多文件转为jsongObjectNames.push(fileUrl);inputField.val(JSON.stringify(gObjectNames));var imageHtml = '';for (var i = 0; i < gObjectNames.length; i++) {if (isImage > -1) {imageHtml += '<li class="image-info"><div class="info"><img src="' +  gObjectNames[i] + '"/><p>' + gObjectNames[i] + '</p><div class="delete-image"> X </div></div></li>';}if (isVideo > -1) {imageHtml += '<li class="video-info"><div class="info"><video controls src="' +  gObjectNames[i] + '"></video><p>' + gObjectNames[i] + '</p><div class="delete-image"> X </div></div></li>';}if (isApplication > -1) {imageHtml += '<li class="file-info"><div class="info"><div class="attachment-file">' +  gObjectNames[i] + '</div><p>' + gObjectNames[i] + '</p><div class="delete-image"> X </div></div></li>';}}el.find('.media-list ul').html(imageHtml);} else {// 单文件直接用名称，inputField.val(fileUrl);gObjectName = fileUrl// 把图片显示出来var imageHtml = '';if (isImage > -1) {imageHtml = '<li class="image-info"><div class="info"><img src="' +  gObjectName + '"/><p>' + gObjectName + '</p><div class="delete-image"> X </div></div></li>';}if (isVideo > -1) {imageHtml = '<li class="video-info"><div class="info"><video controls src="' +  gObjectName + '"></video><p>' + gObjectName + '</p><div class="delete-image"> X </div></div></li>';}if (isApplication > -1) {imageHtml += '<li class="file-info"><div class="info"><div class="attachment-file">' +  gObjectName + '</div><p>' + gObjectName + '</p><div class="delete-image"> X </div></div></li>';}el.find('.media-list ul').html(imageHtml);}} else {alert(fileInfos.msg);}} else {alert(info.response);}},Error: function(up, err) {if (err.code == -600) {alert("\n选择的文件太大了,可以根据应用情况，在upload.js 设置一下上传的最大大小");} else if (err.code == -601) {alert("\n选择的文件后缀不对,可以根据应用情况，在upload.js进行设置可允许的上传文件类型");} else if (err.code == -602) {alert("\n这个文件已经上传过一遍了");} else {alert("\nError xml:" + err.response);}}}})uploader.init();})// 删除$('.media-picker').each(function() {var el = $(this)var inputField = el.find('input[type=hidden]');var fileUrl = inputField.val();var elbtn = el.find('.media-picker-button');var multiSelection = false;// 是否多文件上传if (elbtn.attr('data-multiple') == 'multiple') {multiSelection = true;}if (multiSelection) {el.on('click', '.delete-image', function() {var elDel = $(this);// 得到filenamevar currentFileName = elDel.prev('p').html();// 删除当前的父级lielDel.parent().parent().remove();// 重新赋值数组// 去掉url数组中的当前urlfor(var i in gObjectNames) {if(gObjectNames[i] == currentFileName) {gObjectNames.splice(i,1);break;}}// 后端不做删除/*$.ajaxSetup({headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},});$.ajax({type: "POST",url: baseBackend + "uploader/deluploader",data: "attachement_id=" + currentAttachementId,success: function(msg) {}});*/inputField.val(JSON.stringify(gObjectNames));})} else {el.on('click', '.delete-image', function() {// 显示值为空el.find('.media-list ul').html('');inputField.val('');// oss删除if (gObjectName != '') {fileAttachement = gObjectName;}// 后端不做删除/*$.ajaxSetup({headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},});$.ajax({type: "POST",url: baseBackend + "uploader/deluploader",data: "attachement_id=" + fileAttachement,success: function(msg) {}});*/})}})
})

 

上传注意时需要注意加入csrf

 

后端

@Controller
@RequestMapping(value = "/backend")
public class UploadController {@PostMapping(value = "/upload", produces = "application/json;charset=UTF-8")@ResponseBodypublic String upload(@RequestParam("file") MultipartFile file, HttpServletRequest request){Map<String, String> jres = new HashMap<String, String>();Gson gson = new Gson();if(!file.isEmpty()) {// 文件夹路径// 这里正是环境要处理，spring boot每次重启都会重新生成临时目录String uploadPath = request.getSession().getServletContext().getRealPath("upload/");String currentDatePath = ToolUtils.makeDatePath();String savePath = uploadPath.concat("/").concat(currentDatePath);// 获取文件名String fileName = file.getOriginalFilename();String newFileName = ToolUtils.makeFileName(fileName);String showUrl = "/upload/".concat(currentDatePath).concat("/").concat(newFileName);File saveFile = new File(savePath, newFileName);if (!saveFile.exists()) {saveFile.mkdirs();}try {file.transferTo(saveFile);jres.put("error", "0");jres.put("url", showUrl);gson.toJson(jres);} catch (Exception e) {jres.put("error", "1");jres.put("msg", "wrong");}return gson.toJson(jres);}jres.put("error", "1");jres.put("msg", "wrong");return gson.toJson(jres);}
}

 

这篇关于Spring mvc 集成 plupload 上传图片的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/802393。

相关文章

Java数组初始化的五种方式

Java数组初始化的五种方式

《Java数组初始化的五种方式》数组是Java中最基础且常用的数据结构之一,其初始化方式多样且各具特点,本文详细讲解Java数组初始化的五种方式,分析其适用场景、优劣势对比及注意事项,帮助避免常见陷阱... 目录1. 静态初始化：简洁但固定代码示例核心特点适用场景注意事项2. 动态初始化：灵活但需手动管理代
阅读更多...
Java使用SLF4J记录不同级别日志的示例详解

Java使用SLF4J记录不同级别日志的示例详解

《Java使用SLF4J记录不同级别日志的示例详解》SLF4J是一个简单的日志门面,它允许在运行时选择不同的日志实现,这篇文章主要为大家详细介绍了如何使用SLF4J记录不同级别日志,感兴趣的可以了解下... 目录一、SLF4J简介二、添加依赖三、配置Logback四、记录不同级别的日志五、总结一、SLF4J
阅读更多...
将Java项目提交到云服务器的流程步骤

将Java项目提交到云服务器的流程步骤

《将Java项目提交到云服务器的流程步骤》所谓将项目提交到云服务器即将你的项目打成一个jar包然后提交到云服务器即可,因此我们需要准备服务器环境为：Linux+JDK+MariDB（MySQL）+Gi... 目录1. 安装 jdk1.1 查看 jdk 版本1.2 下载 jdk2. 安装 mariadb(my
阅读更多...
SpringBoot中配置Redis连接池的完整指南

SpringBoot中配置Redis连接池的完整指南

《SpringBoot中配置Redis连接池的完整指南》这篇文章主要为大家详细介绍了SpringBoot中配置Redis连接池的完整指南,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以... 目录一、添加依赖二、配置 Redis 连接池三、测试 Redis 操作四、完整示例代码（一）pom.
阅读更多...
Java 正则表达式URL 匹配与源码全解析

Java 正则表达式URL 匹配与源码全解析

《Java正则表达式URL匹配与源码全解析》在Web应用开发中,我们经常需要对URL进行格式验证,今天我们结合Java的Pattern和Matcher类,深入理解正则表达式在实际应用中... 目录1.正则表达式分解：2. 添加域名匹配 (2)3. 添加路径和查询参数匹配 (3) 4. 最终优化版本5.设计思
阅读更多...
C#实现将Excel表格转换为图片(JPG/ PNG)

C#实现将Excel表格转换为图片(JPG/ PNG)

《C#实现将Excel表格转换为图片(JPG/PNG)》Excel表格可能会因为不同设备或字体缺失等问题,导致格式错乱或数据显示异常,转换为图片后,能确保数据的排版等保持一致,下面我们看看如何使用C... 目录通过C# 转换Excel工作表到图片通过C# 转换指定单元格区域到图片知识扩展C# 将 Excel
阅读更多...
Java使用ANTLR4对Lua脚本语法校验详解

Java使用ANTLR4对Lua脚本语法校验详解

《Java使用ANTLR4对Lua脚本语法校验详解》ANTLR是一个强大的解析器生成器,用于读取、处理、执行或翻译结构化文本或二进制文件,下面就跟随小编一起看看Java如何使用ANTLR4对Lua脚本... 目录什么是ANTLR？第一个例子ANTLR4 的工作流程Lua脚本语法校验准备一个Lua Gramm
阅读更多...
Java字符串操作技巧之语法、示例与应用场景分析

Java字符串操作技巧之语法、示例与应用场景分析

《Java字符串操作技巧之语法、示例与应用场景分析》在Java算法题和日常开发中,字符串处理是必备的核心技能,本文全面梳理Java中字符串的常用操作语法,结合代码示例、应用场景和避坑指南,可快速掌握字... 目录引言1. 基础操作1.1 创建字符串1.2 获取长度1.3 访问字符2. 字符串处理2.1 子字
阅读更多...
Java Optional的使用技巧与最佳实践

Java Optional的使用技巧与最佳实践

《JavaOptional的使用技巧与最佳实践》在Java中,Optional是用于优雅处理null的容器类,其核心目标是显式提醒开发者处理空值场景,避免NullPointerExce... 目录一、Optional 的核心用途二、使用技巧与最佳实践三、常见误区与反模式四、替代方案与扩展五、总结在 Java
阅读更多...
基于Java实现回调监听工具类

基于Java实现回调监听工具类

《基于Java实现回调监听工具类》这篇文章主要为大家详细介绍了如何基于Java实现一个回调监听工具类,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录监听接口类 Listenable实际用法打印结果首先，会用到 函数式接口 Consumer, 通过这个可以解耦回调方法，下面先写一个
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2