今天就跟大家聊聊有关SpringMVC中怎么利用dropzone组件实现图片上传功能,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
我们提供的服务有:网站建设、网站制作、微信公众号开发、网站优化、网站认证、武冈ssl等。为成百上千企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的武冈网站制作公司
一、dropzone导入
01.dropzone官网下载其插件压缩包并复制项目;
02.将CSS和JS文件在HTML文件中引入;
//下面src中的地址根据自己文件地址进行修改,不能之间copy,否则可能用不了!!!
二、dropzone的使用
只需要一个 p 元素,用 JavaScript 代码启用即可
HTML 结构如下:
JavaScript 启用代码如下:
前端工作做完后,后台需要提供文件上传支持,我们使用 Spring MVC 来接收上传的文件
三、SpringMVC的处理
commons-fileupload jar包导入
01.如果使用Meaven仓库,在其Pom.xml添加如下依赖。
如果未使用Meaven,百度commons-fileupload下载jar并复制到项目中。
配置 spring-mvc.xml
需要 Spring 注入 multipartResolver 实例,spring-mvc.xml 增加如下配置:
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组件实现图片上传功能有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注创新互联行业资讯频道,感谢大家的支持。