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

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

先看效果图

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

实现方法如下

一、前台代码

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

<input type="file" name="file" id="file" onchange="uploadImg()">
<input type="hidden" name="avatar" id="avatar">
<img src="" alt="" id="avatarShow" width="100px" height="100px">

2、引入 jquery 和 ajaxfileupload.js

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

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

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

3、ajax 代码

<script>
//ajax提交信息
function uploadImg() {
if($("#file").val() != "") {
$.ajaxFileUpload({
type: "POST",
url:"${pageContext.request.contextPath}/uploadFile",
dataType: "json",
fileElementId:"file", // 文件的id
success: function(d){
if(d.code == 0) {
//alert("上传成功");
//图片显示
$("#avatar").attr("value",d.data.url);
$("#avatarShow").attr("src",d.data.url);
}
},
error: function () {
alert("上传失败");
},
});
} else {
alert("请先选择文件");
}
}
</script>

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

注意：

① 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

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

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

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

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

3、UploadFileController.java

package com.liuyanzhao.blog.controller;
import com.liuyanzhao.blog.vo.ResultVO;
import com.liuyanzhao.blog.vo.UploadFileVO;
import org.springframework.data.repository.query.Param;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import java.io.File;
import java.io.IOException;
import java.util.Calendar;
@Controller
public class UploadFileController {
//上传文件
@RequestMapping(value = "/uploadFile",method = RequestMethod.POST)
@ResponseBody
public ResultVO uploadFile(@Param("file")MultipartFile file) throws IOException {
//本地使用,上传位置
String rootPath ="/Users/liuyanzhao/Documents/uploads/";
//String rootPath ="/www/uploads/";
//文件的完整名称,如spring.jpeg
String filename = file.getOriginalFilename();
//文件名,如spring
String name = filename.substring(0,filename.indexOf("."));
//文件后缀,如.jpeg
String suffix = filename.substring(filename.lastIndexOf("."));
//创建年月文件夹
Calendar date = Calendar.getInstance();
File dateDirs = new File(date.get(Calendar.YEAR)
+ File.separator + (date.get(Calendar.MONTH)+1));
//目标文件
File descFile = new File(rootPath+File.separator+dateDirs+File.separator+filename);
int i = 1;
//若文件存在重命名
String newFilename = filename;
while(descFile.exists()) {
newFilename = name+"("+i+")"+suffix;
String parentPath = descFile.getParent();
descFile = new File(parentPath+File.separator+dateDirs+File.separator+newFilename);
i++;
}
//判断目标文件所在的目录是否存在
if(!descFile.getParentFile().exists()) {
//如果目标文件所在的目录不存在，则创建父目录
descFile.getParentFile().mkdirs();
}
//将内存中的数据写入磁盘
file.transferTo(descFile);
//完整的url
String fileUrl = "/uploads/"+dateDirs+ "/"+newFilename;
ResultVO resultVO = new ResultVO();
resultVO.setCode(0);
resultVO.setMsg("成功");
UploadFileVO uploadFileVO = new UploadFileVO();
uploadFileVO.setTitle(filename);
uploadFileVO.setUrl(fileUrl);
resultVO.setData(uploadFileVO);
return resultVO;
}
}

注意：

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

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

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

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

4、ResultVO.java 和 UploadFileVO.java

① ResultVO.java

package com.liuyanzhao.blog.VO;
/**
* @author 言曌
* @date 2017/11/30 下午7:04
*/
public class ResultVO<T> {
//错误码
private Integer code;
//提示信息
private String msg;
//返回的具体内容
private T data;
public Integer getCode() {
return code;
}
public void setCode(Integer code) {
this.code = code;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
public T getData() {
return data;
}
public void setData(T data) {
this.data = data;
}
}

这里的 T 表示泛型

② UploadFileVO.java

package com.liuyanzhao.blog.VO;
/**
* @author 言曌
* @date 2017/11/30 下午7:41
*/
public class UploadFileVO {
private String url;
private String title;
public String getUrl() {
return url;
}
public void setUrl(String url) {
this.url = url;
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
}

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

三、设置静态资源映射，用于显示图片

我这里设置上传文件到 /Users/liuyanzhao/Documents/uploads 目录

比如有一张图片的本地路径为

/Users/liuyanzhao/Documents/uploads/2017/11/2017113021011541.jpg

我们想让它能在服务器上访问，需要给 Tomcat 配置静态资源映射

方法一、

使用 IDE 配置，比如我使用的是 IntelliJ IDEA 可以在 Tomcat 的配置 Development 里，如图

方法二、

如果你是直接启动本地的 Tomcat，而不是 IDE 的（不太记得 Eclipse 能不能直接设置），可以在 Tomcat 的目录下的 config/server.xml 里

我的是

/Users/liuyanzhao/Documents/JavaStudy/tomcat/apache-tomcat-7.0.37/conf/server.xml

在最后的 </Host> 里添加

<Context path="/uploads" docBase="/Users/liuyanzhao/Documents/uploads" reloadable="true" crossContext="true"></Context>

如图

如图，这张图片的 url 是

/uploads/2017/11/2017113022393913.jpg

即

http://localhost:8090/uploads/2017/11/2017113022393913.jpg

本文链接：https://liuyanzhao.com/6833.html