糖尿病康复 > SpringMVC实现ajax上传图片实时预览

SpringMVC实现ajax上传图片实时预览

时间：2018-08-12 13:16:26

本文介绍使用SpringMVC+ ajaxfileupload.js 实现 ajax 上传文件。

先看效果图

点击上传文件框，触发上传文件方法，然后后台返回图片的 url，进行显示。

实现方法如下

一、前台代码

1、add.jsp (或者 html 文件)

<inputtype="file"name="file"id="file"onchange="uploadImg()"><inputtype="hidden"name="avatar"id="avatar"><imgsrc=""alt=""id="avatarShow"width="100px"height="100px">

2、引入 jquery 和ajaxfileupload.js

<scriptsrc="${pageContext.request.contextPath}/static/js/jquery.min.js"></script><scriptsrc="${pageContext.request.contextPath}/static/js/ajaxfileupload.js"></script>

这里给出ajaxfileupload.js下载地址，网上也有下载

这里有个坑，详情看这里使用ajaxfileupload.js上传文件成功之后，没有执行success方法

3、ajax 代码

需要放在上面两个库的后面

注意：

① type 填 post

② 第8行的dataType 是小写的 json，不要写成大写的啦

③ 第9行的 fileElementId 填文件框的id

④ 先确保 url 没写错

二、后台代码

1、给 maven 添加依赖

①、首先需要导入 json 的依赖

<dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-databind</artifactId><version>2.5.0</version></dependency><dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-core</artifactId><version>2.5.0</version></dependency><dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-annotations</artifactId><version>2.5.0</version></dependency>

②、然后需要上传文件的依赖

<dependency><groupId>commons-fileupload</groupId><artifactId>commons-fileupload</artifactId><version>1.3.1</version></dependency><dependency><groupId>commons-io</groupId><artifactId>commons-io</artifactId><version>2.4</version></dependency>

2、spring-mvc.xml

<?xmlversion="1.0"encoding="UTF-8"?><beansxmlns="/schema/beans"xmlns:mvc="/schema/mvc"xmlns:xsi="/2001/XMLSchema-instance"xmlns:context="/schema/context"xsi:schemaLocation="/schema/beans/schema/beans/spring-beans-3.1.xsd/schema/context/schema/context/spring-context-3.1.xsd/schema/mvc/schema/mvc/spring-mvc-3.1.xsd"><mvc:annotation-driven/><context:component-scanbase-package="com.liuyanzhao.blog.controller"use-default-filters="false"><context:include-filtertype="annotation"expression="org.springframework.stereotype.Controller"/><context:include-filtertype="annotation"expression="org.springframework.web.bind.annotation.ControllerAdvice"/></context:component-scan><beanid="mappingJacksonHttpMessageConverter"class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter"><propertyname="supportedMediaTypes"><list><value>application/x-www-form-urlencoded;charset=UTF-8</value></list></property></bean><beanclass="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter"><propertyname="messageConverters"><list><refbean="mappingJacksonHttpMessageConverter"/></list></property></bean><beanclass="org.springframework.web.servlet.view.InternalResourceViewResolver"><propertyname="prefix"value="/WEB-INF/views/"/><propertyname="suffix"value=".jsp"/></bean><beanid="multipartResolver"class="org.springframework.monsMultipartResolver"><propertyname="maxUploadSize"value="52428800"/><propertyname="defaultEncoding"value="UTF-8"/><propertyname="resolveLazily"value="true"/></bean></beans>

上面是 spring-mvc.xml 所有的代码

一定要添加文件上传那块代码（50-55行）

然后 31-38 行的对象转成JSON 也要正确

3、UploadFileController.java

packagecom.liuyanzhao.blog.controller;importcom.liuyanzhao.blog.vo.ResultVO;importcom.liuyanzhao.blog.vo.UploadFileVO;importorg.springframework.data.repository.query.Param;importorg.springframework.stereotype.Controller;importorg.springframework.web.bind.annotation.RequestMapping;importorg.springframework.web.bind.annotation.RequestMethod;importorg.springframework.web.bind.annotation.ResponseBody;importorg.springframework.web.multipart.MultipartFile;importjava.io.File;importjava.io.IOException;importjava.util.Calendar;@ControllerpublicclassUploadFileController{//上传文件@RequestMapping(value="/uploadFile",method=RequestMethod.POST)@ResponseBodypublicResultVOuploadFile(@Param("file")MultipartFilefile)throwsIOException{//本地使用,上传位置StringrootPath="/Users/liuyanzhao/Documents/uploads/";//StringrootPath="/www/uploads/";//文件的完整名称,如spring.jpegStringfilename=file.getOriginalFilename();//文件名,如springStringname=filename.substring(0,filename.indexOf("."));//文件后缀,如.jpegStringsuffix=filename.substring(filename.lastIndexOf("."));//创建年月文件夹Calendardate=Calendar.getInstance();FiledateDirs=newFile(date.get(Calendar.YEAR)+File.separator+(date.get(Calendar.MONTH)+1));//目标文件FiledescFile=newFile(rootPath+File.separator+dateDirs+File.separator+filename);inti=1;//若文件存在重命名StringnewFilename=filename;while(descFile.exists()){newFilename=name+"("+i+")"+suffix;StringparentPath=descFile.getParent();descFile=newFile(parentPath+File.separator+dateDirs+File.separator+newFilename);i++;}//判断目标文件所在的目录是否存在if(!descFile.getParentFile().exists()){//如果目标文件所在的目录不存在，则创建父目录descFile.getParentFile().mkdirs();}//将内存中的数据写入磁盘file.transferTo(descFile);//完整的urlStringfileUrl="/uploads/"+dateDirs+"/"+newFilename;ResultVOresultVO=newResultVO();resultVO.setCode(0);resultVO.setMsg("成功");UploadFileVOuploadFileVO=newUploadFileVO();uploadFileVO.setTitle(filename);uploadFileVO.setUrl(fileUrl);resultVO.setData(uploadFileVO);returnresultVO;}}

注意：

① 一定要加@ResponseBody 注解，加了@ResponseBody 注解，我们返回的resultVO 对象会转成 JSON 返回前台。这个依赖于前面说的 spirng-mvc.xml 里的 JSON 配置

② 返回给前台的 JSON 格式如下

所以我这里封装了对象resultVO 和uploadFileVO 具体类下面会给出

③ 记得要修改第30行的本地路径，这个路径待会儿还要配静态资源映射

4、ResultVO.java 和 UploadFileVO.java

① ResultVO.java

packagecom.liuyanzhao.blog.VO;/***@author言曌*@date/11/30下午7:04*/publicclassResultVO<T>{//错误码privateIntegercode;//提示信息privateStringmsg;//返回的具体内容privateTdata;publicIntegergetCode(){returncode;}publicvoidsetCode(Integercode){this.code=code;}publicStringgetMsg(){returnmsg;}publicvoidsetMsg(Stringmsg){this.msg=msg;}publicTgetData(){returndata;}publicvoidsetData(Tdata){this.data=data;}}

这里的 T 表示泛型

② UploadFileVO.java

packagecom.liuyanzhao.blog.VO;/***@author言曌*@date/11/30下午7:41*/publicclassUploadFileVO{privateStringurl;privateStringtitle;publicStringgetUrl(){returnurl;}publicvoidsetUrl(Stringurl){this.url=url;}publicStringgetTitle(){returntitle;}publicvoidsetTitle(Stringtitle){this.title=title;}}

因为这里是上传图片，我们需要给前台返回返回一个文件的URL，所以这里封装一个对象，用来拼接JSON。