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

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

操作步骤如下

一、dropzone导入

01.dropzone官网下载其插件压缩包并复制项目；

02.将css和js文件在HTML文件中引入；

//下面src中的地址根据自己文件地址进行修改，不能之间copy，否则可能用不了！！！

二、dropzone的使用

只需要一个 div 元素，用 javascript 代码启用即可

HTML 结构如下：

javaScript 启用代码如下：

var myDropzone = new Dropzone("#dropz", {

url: "/upload", //需要上传的后台接口地址

dictDefaultMessage: '拖动文件至此或者点击上传', // 设置默认的提示语句

paramName: "dropzFile", // 传到后台的参数名称

init: function () {

this.on("success", function (file, data) {

// 上传成功触发的事件

});

}

});

&ltLNJwaQG;/script>

前端工作做完后，后台需要提供文件上传支持，我们使用 Spring MVC 来接收上传的文件

三、SpringMVC的处理

commons-fileupload jar包导入

01.如果使用Meaven仓库，在其Pom.xml添加如下依赖。

commons-fileupload

commons-fileupload

1.3.2

如果未使用Meaven，百度commons-fileupload下载jar并复制到项目中。

配置 spring-mvc.xml

需要 Spring 注入 multipartResolver 实例，spring-mvc.xml 增加如下配置：

Controller类的代码实现

@Controller

public class UploadController {

@ResponseBody

@RequestMapping(value = "upload", method = RequestMethod.POST)

public String upload(MultipartFile dropzhttp://File, HttpServletRequest request) {

// 获取上传的原始文件名

String fileName = dropzFile.getOriginhttp://alFilename();

// 设置文件上传路径

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 "";

}

}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。