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 的依赖<!-- jackson -->
    <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" >

    <!-- 启用SpringMVC的注解功能,它会自动注册HandlerMapping、HandlerAdapter、ExceptionResolver的相关实例 -->
    <mvc:annotation-driven />
    <!-- SpringMVC的扫描范围 -->
    <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>

    <!-- 用于返回json格式 -->
    <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>

    <!-- 完成请求和注解POJO的映射 -->
    <bean class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter">
        <property name="messageConverters">
            <list >
                <ref bean="mappingJacksonHttpMessageConverter" />
            </list>
        </property>
    </bean>

    <!-- 配置SpringMVC的视图解析器 -->
    <!-- 其viewClass属性的默认值就是org.springframework.web.servlet.view.JstlView -->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <!-- <property name="viewClass" value="org.springframework.web.servlet.view.JstlView" /> -->
        <property name="prefix" value="/WEB-INF/views/" />
        <property name="suffix" value=".jsp" />
    </bean>

    <!--文件上传-->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <!--设置上传最大尺寸为50MB-->
        <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.javapackage 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.javapackage 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.javapackage 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