SpringMVC+ajax文件上传实例教程

文件上传

文件上传是项目开发中最常见的功能。为了能上传文件，必须将表单的method设置为POST，并将enctype设置为multipart/form-data。只有在这样的情况下，浏览器才会把用户选择的文件以二进制数据发送给服务器。

一旦设置了enctype为multipart/form-data，浏览器即会采用二进制流的方式来处理表单数据，而对于文件上传的处理则涉及在服务器端解析原始的HTTP响应。在2003年，Apache Software Foundation发布了开源的Commons FileUpload组件，其很快成为Servlet/JSP程序员上传文件的最佳选择。

Servlet3.0规范已经提供方法来处理文件上传，但这种上传需要在Servlet中完成。而SpringMVC则提供了更简单的封装。
SpringMVC为文件上传提供了直接的支持，这种支持是用即插即用的MultipartResolver实现的。SpringMVC使用Apache Commons FileUpload技术实现了一个MultipartResolver实现类：CommonsMultipartResolver。因此，SpringMVC的文件上传还需要依赖Apache Commons FileUpload的组件。

这个实例教程是我在其他项目中取的lib包，是用idea开发的一个demo。采用Tomcat7作为web服务器大家跟随我的步骤做一般不会有问题。

• 第一步创建springmvc项目点击file—>new—> project勾选如下图所示的选项后续next；中途会有项目的名字这里自己随意我取得名字叫mvc；创建项目的过程中会自动倒部分SpringMVC的jar包依赖，后续还需要添加。

1. 创建好的项目结构

2.lib需要的包结构图因为是从其他项目中提取得jar包其中有几个是用不到的；如果闲麻烦可以到百度云下载

提醒：如果你直接从我的链接下载最好把你创建工程时自动下载的依赖jar包删除，然后直接导入

链接：https://pan.baidu.com/s/1Hdapx9J2K9_CPtIM15ImxA     

提取密码：8tk3

下面我们在WebContent/WEB-INF下创建一个content文件夹，用于放文件的上传、下载等jsp文件，下面我们创建uploadForm.jsp文件，演示SpringMVC的文件上传：

<%--
  Created by IntelliJ IDEA.
  User: YYBJ
  Date: 2018/7/13
  Time: 10:54
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>









    
    



文件上传

    

        

            
文件描述:
            

        
        

            
请选择文件:
            

        
        

            

        
    

注意提醒：这里ajax结合formdata对象上传文件是比较方便的如果对formdata不了解可以自行查看关于formdata的资料提供一个链接参考

https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects

SpringMVC会将上传的文件绑定到MultipartFile对象中。MultipartFile提供了获取上传文件内容、文件名等方法。通过transferTo()方法还可以将文件存储到硬件中，MultipartFile对象中的常用方法如下：

1. byte[] getBytes()：获取文件数据
2. String getContentType[]：获取文件MIME类型，如image/jpeg等
3. InputStream getInputStream()：获取文件流
4. String getName()：获取表单中文件组件的名字
5. String getOriginalFilename()：获取上传文件的原名
6. Long getSize()：获取文件的字节大小，单位为byte
7. boolean isEmpty()：是否有上传文件
8. void transferTo(File dest)：将上传文件保存到一个目录文件中

SpringMVC上下文中默认没有装配MultipartResolver，因此默认情况下其不能处理文件上传工作。如果想使用spring的文件上传功能，则需要在上下文中配置MultipartResolver。在dispatcher-servlet.xml进行配置文件如下：

    
    

    
    
        
        
            /WEB-INF/content/
        
        
        
            .jsp
        
    

    
        
        
            10485760
        
        
        
            UTF-8
        
    

在applicationContext.xml文件中同样添加包扫描

在web.xml文件中添加必要的过滤器和servlet配置

    MultipartFileTest
    
        contextConfigLocation
        /WEB-INF/applicationContext.xml
    
    
    
        springmvc
        
            org.springframework.web.servlet.DispatcherServlet
        
        
            contextConfigLocation
            /WEB-INF/dispatcher-servlet.xml
        
        1
    

    
    
        springmvc
        *.html
    
    
        springmvc
        *.json
    
    
        springmvc
        /
    

    
    
        characterEncodingFilter
        org.springframework.web.filter.CharacterEncodingFilter
        
            encoding
            UTF-8
        
    
    
        characterEncodingFilter
        /*
    
    
        index.jsp
    

在最外层的index.jsp文件中添加一行跳转请求。正常情况下我们的jsp页面都放在web-INF下。一般是不能直接跳转访问的所以我们采用调用接口在接口中请求跳转。这里会请求到controller目录下的intoload方法这时候注解的方式就起作用了。

<%--
  Created by IntelliJ IDEA.
  User: YYBJ
  Date: 2018/7/16
  Time: 11:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

负责上传文件的表单和一般表单有一些区别，负责上传文件的表单的编码类型必须是“multipart/form-data”。

我们再src下创建一个包“cn.edu.jseti.controller”，然后创建一个FileUploadController类，用于实现文件的上传和下载功能。以下是所有的controller代码。注意：这里会用到注解的开发所以需要配置.xml文件在后续步骤

package cn.edu.jseti.controller;

import cn.edu.jseti.domain.User;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import org.apache.commons.io.FileUtils;
import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpStatus;
import org.springframework.http.MediaType;
import org.springframework.http.ResponseEntity;
import org.springframework.ui.Model;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.servlet.ModelAndView;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;

/**
 * Created by YYBJ on 2018/7/16.
 * ZCL
 */
@Controller
@RequestMapping("/controller")
public class FileUploadController {
     //这个方法是进行页面跳转的 jsp页面在WEB-INF下不能直接访问
    @RequestMapping(value = "/intoload")
    public ModelAndView intoload(HttpServletRequest request, HttpServletResponse response)throws  Exception{
        System.out.println("111111111111111");
        ModelAndView mv = new ModelAndView();
        mv.setViewName("/uploadForm");
        return mv;
    }
    //上传文件会自动绑定到MultipartFile中
    @RequestMapping("/upload")
    @ResponseBody
    public String upload(HttpServletRequest request,
                         @RequestParam("description") String description,
                         @RequestParam("file") MultipartFile file) throws Exception {
        System.out.println(description);
        //如果文件不为空，写入上传路径
        if(!file.isEmpty()) {
            //上传文件路径
            String path = request.getServletContext().getRealPath("/images/");
            
            System.out.println(path);
            //上传文件名
            String filename = file.getOriginalFilename();
            File filepath = new File(path,filename);
            //判断路径是否存在，如果不存在就创建一个
            if (!filepath.getParentFile().exists()) {
                filepath.getParentFile().mkdirs();
            }
            //将上传文件保存到一个目标文件当中
            file.transferTo(new File(path + File.separator + filename));
            //输出文件上传最终的路径 测试查看
            System.out.println(path + File.separator + filename);
            return "1";
        } else {
            return "0";
        }

    }

}

 最终启动项目测试控制台Tomcat基本没有报错，这时开始测试，启动项目自动跳转到文件上传页面。如果跳转出错看自己的tomc配置路径是否有问题。

 

 

 

 

最终测试完成 从控制台查看输出的路径找到图片是否存在到此文件上传完成。有问题可以留言

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/weixin_41092717/article/details/81080152