SpringMVC利用dropzone组件实现图片上传

 更新时间:2020年02月14日 15:43:36   作者:98巨人   我要评论
这篇文章主要介绍了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的使用

只需要一个 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 "";
  }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 如何使用SpEL表达式实现动态分表查询

    如何使用SpEL表达式实现动态分表查询

    这篇文章主要介绍了如何使用SpEL表达式实现动态分表查询,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-12-12
  • Java8新特性之再见Permgen_动力节点Java学院整理

    Java8新特性之再见Permgen_动力节点Java学院整理

    这篇文章主要介绍了Java8新特性之再见Permgen的相关知识,非常不错,具有参考借鉴价值,需要的的朋友参考下吧
    2017-06-06
  • Spring依赖注入的三种方式小结

    Spring依赖注入的三种方式小结

    本篇文章主要介绍了Spring依赖注入的三种方式小结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • 解决在启动eclipse的tomcat进行访问时出现404问题的方法

    解决在启动eclipse的tomcat进行访问时出现404问题的方法

    这篇文章主要介绍了解决在启动eclipse的tomcat进行访问时出现404问题的方法,感兴趣的小伙伴们可以参考一下
    2016-04-04
  • Java的绘图模式使用浅析

    Java的绘图模式使用浅析

    这篇文章主要介绍了Java的绘图模式使用浅析,以一个小例子大概列举了XOR模式下能干的一些事情,需要的朋友可以参考下
    2015-10-10
  • 你会用Java代码模拟高并发吗

    你会用Java代码模拟高并发吗

    这篇文章主要介绍了你会用Java代码模拟高并发吗,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • TCP/IP协议中三次握手四次挥手的原理及流程分析

    TCP/IP协议中三次握手四次挥手的原理及流程分析

    这篇文章主要介绍了TCP/IP协议中三次握手四次挥手的原理及流程分析,具有一定参考价值,需要的朋友可以了解下。
    2017-11-11
  • java自定义线程池的原理简介

    java自定义线程池的原理简介

    这篇文章主要介绍了java自定义线程池的原理详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08
  • Mybatis批量插入数据返回主键的实现

    Mybatis批量插入数据返回主键的实现

    这篇文章主要介绍了Mybatis批量插入数据返回主键的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • java中Integer包装类装箱的一个细节详解

    java中Integer包装类装箱的一个细节详解

    Java中的Integer是int的包装类型,下面这篇文章主要给大家介绍了关于java中Integer包装类装箱的一个细节的相关资料,文中介绍的这个细节挺重要的,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起看看吧
    2018-07-07

最新评论