温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

SpringMVC中怎么利用dropzone组件实现图片上传功能

发布时间:2021-08-07 15:12:39 来源:亿速云 阅读:268 作者:Leah 栏目:编程语言

今天就跟大家聊聊有关SpringMVC中怎么利用dropzone组件实现图片上传功能,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

一、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的使用

只需要一个 p 元素,用 JavaScript 代码启用即可

HTML 结构如下:

<p id="dropz" class="dropzone"></p>

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类的代码实现

@Controllerpublic 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 "";  }}

看完上述内容,你们对SpringMVC中怎么利用dropzone组件实现图片上传功能有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注亿速云行业资讯频道,感谢大家的支持。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI