SpringMVC使用JSP通过Ajax上传文件到后台

最新推荐文章于 2026-04-09 15:41:41 发布

原创最新推荐文章于 2026-04-09 15:41:41 发布 · 840 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#ajax #jquery #前端

SpringMVC上传文件专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍如何在SpringMVC框架下实现文件上传功能，包括依赖配置、前端JSP页面设计、后端Controller代码实现及文件大小限制处理。

1、

所需依赖

    <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.3</version>
    </dependency>

SpringMVC.xml配置文件中一定要有文件配置：

 <!--配置文件上传解析器-->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <!-- maxUploadSize 文件上传的最大尺寸 -->
        <property name="maxUploadSize" value="524288000"/>
        <!--maxInMemorySize 文件上传阈值，低于此值，只保留在内存里，超过此阈值，生成硬盘上的临时文件 -->
        <property name="maxInMemorySize" value="4096"/>
        <!--resolveLazily 延迟文件解析，防止controller响应时间很长  上传大文件使用，文件小可以不用 -->
        <property name="resolveLazily" value="true"/>
        <!--defaultEncoding 设置字符集-->
        <property name="defaultEncoding" value="UTF-8"/>
    </bean>

在这里插入图片描述

2、前台JSP的代码；
//注意引入JQuery.js文件

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    function UUploadedFile() {
        var formData = new FormData();
        formData.append('file', $('#UUploadedFile')[0].files[0]);
        $.ajax({
            async: false,//要求同步 不是不需看你的需求
            url : "${ctxPath }material/TestuploadFile.do",
            type : 'POST',
            data : formData,
            dataType: "json",
            processData : false,  //必须false才会避开jQuery对 formdata 的默认处理   
            contentType : false,  //必须false才会自动加上正确的Content-Type
            success: function (data) {
                if (data.success ) {
                   alert("上传完成！");
                }else{
                    alert("上传失败！");
                }
            },
        });
    }
</script>
<body>
<input type="file" id="UUploadedFile"  name="fileupload"  onchange="UUploadedFile()">
</body>
</html>

3、后端的Controller接收请求的代码：

引用

import org.springframework.web.multipart.MultipartHttpServletRequest;
import org.springframework.web.multipart.MultipartFile;

@RequestMapping(value = "/TestuploadFile.do")
    @ResponseBody
    public Map<String, Object> TestuploadFile(HttpServletRequest request){
        Map<String, Object> modelMap=new HashMap<String, Object>();
        try {
            MultipartHttpServletRequest mpRequest = (MultipartHttpServletRequest) request;
            MultipartFile file = mpRequest.getFile("file");
            long fileSize = file.getSize();//获取文件大小
            if (fileSize <= 0) {
                modelMap.put(SUCCESS, false);
                modelMap.put(MESSAGE, "上传失败！上传的文件为空！");
                return modelMap;
            }
            if (fileSize > 200 * 1024 * 1024) {//限制上传文件大小为200M
                modelMap.put(SUCCESS, false);
                modelMap.put(MESSAGE, "上传失败！上传的文件大小超出了限制！");
                return modelMap;
            }
            String originalFilename = file.getOriginalFilename();
            //MultipartFile 自带的文件写出方法
            file.transferTo(new File("C:\\upload\\"+originalFilename));
            modelMap.put(SUCCESS, true);
            modelMap.put(MESSAGE, "上传完成！");
        }  catch (IOException e) {
            modelMap.put(SUCCESS, false);
            modelMap.put(MESSAGE, "上传失败！");
            return modelMap;
        }
        return modelMap;
    }