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 ""; } }
上一篇:MyBatis异常-Property 'configLocation' not specified, using default MyBatis Configuration
栏 目:JAVA代码
本文标题:SpringMVC利用dropzone组件实现图片上传
本文地址:http://www.codeinn.net/misctech/28540.html
阅读排行
- 1Java Swing组件BoxLayout布局用法示例
- 2java中-jar 与nohup的对比
- 3Java邮件发送程序(可以同时发给多个地址、可以带附件)
- 4Caused by: java.lang.ClassNotFoundException: org.objectweb.asm.Type异常
- 5Java中自定义异常详解及实例代码
- 6深入理解Java中的克隆
- 7java读取excel文件的两种方法
- 8解析SpringSecurity+JWT认证流程实现
- 9spring boot里增加表单验证hibernate-validator并在freemarker模板里显示错误信息(推荐)
- 10深入解析java虚拟机