SpringMVC利用dropzone组件实现图片上传
作者:98巨人 时间:2022-01-19 00:37:00
操作步骤如下
一、dropzone导入
01.dropzone官网下载其插件压缩包并复制项目;
02.将CSS和JS文件在HTML文件中引入;
//下面src中的地址根据自己文件地址进行修改,不能之间copy,否则可能用不了!!!
<link rel="stylesheet" href="/static/assets/plugins/dropzone/min/dropzone.min.css" rel="external nofollow" />
<link rel="stylesheet" href="/static/assets/plugins/dropzone/min/basic.min.css" rel="external nofollow" />
<script src="/static/assets/plugins/dropzone/min/dropzone.min.js"></script>
二、dropzone的使用
只需要一个 div 元素,用 JavaScript 代码启用即可
HTML 结构如下:
<div id="dropz" class="dropzone"></div>
JavaScript 启用代码如下:
<script>
var myDropzone = new Dropzone("#dropz", {
url: "/upload", //需要上传的后台接口地址
dictDefaultMessage: '拖动文件至此或者点击上传', // 设置默认的提示语句
paramName: "dropzFile", // 传到后台的参数名称
init: function () {
this.on("success", function (file, data) {
// 上传成功触发的事件
});
}
});
</script>
前端工作做完后,后台需要提供文件上传支持,我们使用 Spring MVC 来接收上传的文件
三、SpringMVC的处理
commons-fileupload jar包导入
01.如果使用Meaven仓库,在其Pom.xml添加如下依赖。
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.2</version>
</dependency>
如果未使用Meaven,百度commons-fileupload下载jar并复制到项目中。
配置 spring-mvc.xml
需要 Spring 注入 multipartResolver 实例,spring-mvc.xml 增加如下配置:
<!-- 上传文件拦截,设置最大上传文件大小 10M = 10*1024*1024(B) = 10485760 bytes -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="maxUploadSize" value="10485760"/>
</bean>
Controller类的代码实现
@Controller
public class UploadController {
@ResponseBody
@RequestMapping(value = "upload", method = RequestMethod.POST)
public String upload(MultipartFile dropzFile, HttpServletRequest request) {
// 获取上传的原始文件名
String fileName = dropzFile.getOriginalFilename();
// 设置文件上传路径
String filePath = request.getSession().getServletContext().getRealPath("/static/upload");
// 获取文件后缀
String fileSuffix = fileName.substring(fileName.lastIndexOf("."), fileName.length());
// 判断并创建上传用的文件夹
File file = new File(filePath);
if (!file.exists()) {
file.mkdir();
}
// 重新设置文件名为 UUID,以确保唯一
file = new File(filePath, UUID.randomUUID() + fileSuffix);
try {
// 写入文件
dropzFile.transferTo(file);
} catch (IOException e) {
e.printStackTrace();
}
return "";
}
}
来源:https://blog.csdn.net/weixin_43881282/article/details/104302040
标签:SpringMVC,dropzone,图片上传
0
投稿
猜你喜欢
Android 中TextView中跑马灯效果的实现方法
2023-08-07 01:39:46
C#启动进程的几种常用方法
2023-06-18 04:13:48
Java删除二叉搜索树最大元素和最小元素的方法详解
2023-09-30 07:27:09
Java后台批量生产echarts图表并保存图片
2023-11-25 03:24:39
java中使用数组进行模拟加密的方法
2023-11-18 15:37:39
Java实现扑克牌程序
2023-11-11 12:09:52
java中匿名内部类详解
2022-10-06 14:56:56
java生成指定范围随机数的多种代码
2023-04-28 07:51:15
Spring Boot自动配置的原理及@Conditional条件注解
2021-08-31 21:14:11
Android异常 java.lang.IllegalStateException解决方法
2023-07-28 10:26:36
Java 设计模式中的策略模式详情
2023-08-06 03:45:11
java对象初始化代码详解
2023-09-19 13:59:01
SpringBoot使用Thymeleaf自定义标签的实例代码
2023-11-24 21:41:29
MyBatis中map的应用与模糊查询实现代码
2021-09-02 18:27:14
Java项目开发中实现分页的三种方式总结
2021-08-25 21:36:36
Springboot2.x+ShardingSphere实现分库分表的示例代码
2023-11-26 01:34:07
springboot中PostMapping正常接收json参数后返回404问题
2021-07-22 20:46:28
Java基于JDBC实现事务,银行转账及货物进出库功能示例
2022-03-24 07:06:34
svn 清理失败 (cleanup 失败) 的快速解决方法
2022-10-25 11:22:40
详解Java Synchronized的实现原理
2023-11-25 06:04:53