SpringMVC上传文件

最新推荐文章于 2024-03-24 13:58:37 发布

Dream_飞翔

最新推荐文章于 2024-03-24 13:58:37 发布

阅读量3.5k

点赞数 7

分类专栏：架构师成长道路文章标签： java ajax spring js html

本文链接：https://blog.csdn.net/qq_48455576/article/details/115289639

版权

架构师成长道路专栏收录该内容

13 篇文章 4 订阅

订阅专栏

文章目录

前言
一、form表单上传
二、Ajax上传
总结

前言

本文介绍前端HTML界面如何向后端发送文件的两种方式： form表单上传和Ajax上传两种方式，本文是基于Spring Boot项目的Web应用。之前在解决文件上传问题时走了不少弯路，在项目完成以后写下博客来记录自己的解决方法，以后再遇到类似的问题将不会再发生之前犯过的错误，如果内容有解释描述不妥之处，欢迎在评论区指出。

送给阅读本文读者的一段话：之前做项目时这些方法我也不会，在实现的过程中也是一直遇到各种各样的问题，我也查阅了网络上很多的博客和案例。但是我在点开博客时看到没有讲解只有代码时就立刻关闭，没有静下心来去好好的理解代码，可能有很多读者和我的心态是一样的，所以在这里想跟和我以前一样心态的读者说一句：亲爱的读者朋友，感谢你点开这篇文章，如果你和我一样有很焦急迫切的心态的话，希望此刻你能静下心来看一看我写的内容，我相信咱们遇到的问题是相似的，有了之前自己希望博文中能够出现的内容，所以我会在博文中加入相应的内容。再次感谢你能看到这里，我也自信我的这篇博文能够帮助到你。

提示：以下是本篇文章正文内容，下面案例可供参考

本文案例基于SpringBoot实现，以上传Excel文件为例，因为这里只涉及到了Controller层，pom.xml文件中的依赖以及其余层的内容在此不多做赘述

一、form表单上传

1、样例代码：

HTML代码

<!DOCTYPE html>
<html>
<head>
    <title>上传文件</title>
    <meta content="text/html" charset="UTF-8">
</head>
<body>
<h1>上传文件</h1>
<form action="/upload" enctype="multipart/form-data" method="post">
    <table>
        <tr>
            <td>文件描述：</td>
            <td><input type="text" name="mess"></td>
        </tr>
        <tr>
            <td>选择文件：</td>
            <td><input type="file" id="file" name="file"></td>
        </tr>
        <tr>
            <td><input type="submit" value="上传" name="btn" id="btn"></td>
        </tr>
    </table>
</form>
</body>
</html>

Controller层代码

package com.example.demo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

/**
 * @author Dream_飞翔
 * @email 1072876976@qq.com
 */
@Controller
public class MessController {
    @RequestMapping("upload")
    @ResponseBody
    public String upLoad(String mess, MultipartFile file){
        System.out.println(mess);
        System.out.println(file.getOriginalFilename());
        return "success";
    }
}

2、运行结果：

在这里插入图片描述

3、代码解析：

HTML代码

<form action="/upload" enctype="multipart/form-data" method="post">
...
</form>

在利用form表单上传文件时要将enctype属性的属性值设置为multipart/form-data，其次要将method的属性值设置为post ，action属性的值为请求的路径（与Controller层中的@requestMapping注解中的值对应，注意要加" / "）

原因：

enctype属性的属性值设置为multipart/form-data
enctype="multipart/form-data"的意思其实就是设置表单的MIME编码。默认情况的编码格式是application/x-www-form-urlencoded，将表单中的数据变为键值对的形式，不能用于文件的上传。而enctype="multipart/form-data"是将表单中的数据变成二进制数据进行上传（也就是说将文件转换成二进制数据进行上传）。
method的属性值设置为post
method的属性值设置为post有多种原因，其中最主要的原因就是：Get方式是用来从服务器上获得数据，而 Post方式是用来向服务器上传递数据 ，其次就是Get 是不安全的，因为在传输过程，数据被放在请求的URL中，除了可能会有一些隐私的信息被第三方看到外，用户也可以在浏览器上直接看到提交的数据，一些系统内部消息将会一同显示在用户面前。而Post 的所有操作对用户来说都是不可见的。

Controller层代码

 @RequestMapping("upload")
 @ResponseBody
 public String upLoad(String mess, MultipartFile file){
 ...
	 return "success";
 }

注解解析：
第一行注解的意思为截取到请求名称为upload的动作，这里的值与HTML页面中form表单中的action的属性值一致.，本质上就是将action的动作截取到，执行注解对应方法中的方法体内容 （在SpringMVC的源码中处理页面请求时用到的底层技术还是Servlet）
第二行注解的意思，在解释第二行代码的意思前先看方法头的返回值为String类型，在Controller层中当方法的返回值为String类型时有两种情况，当方法头前加有@ResponseBody注解时，return的内容将会展示在前端页面上。注意：此时返回前端的是Json对象而不是Json串；当方法头前不加@responseBody注解时将会跳转到对应名称的HTML界面，所以此时当文件上传成功后就将"success"打印到前端界面上

方法解析：
返回值类型为String类型，因为在方法头前加有@ResponseBody注解，因此当文件上传成功后会将return的内容打印到前端显示。第一个参数是获取到前端form表单中的输入的文字信息，对应前端如下语句：

<td>文件描述：</td>
<td><input type="text" name="mess"></td>

第二个参数是MultipartFile本质上是SpringMVC框架为我们提供简化上传操作的工具类，在前端HTML页面上传文件时是将文件转换成二进制字节流来传到后端，如果不使用MultipartFile工具类的话我们只能用HttpServletRequest来接收上传的数据，再手动将二进制流转化为File文件。MultipartFile的出现简化了我们的操作，此时file就是我们传到后端的文件。

file.getOriginalFilename()

getOriginalFilename()为获取到文件的名称

二、Ajax上传

1、样例代码：

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax上传文件</title>
    <script type="text/javascript" src="/js/jquery-3.5.1.min.js"></script>
</head>
<body>
<h1>Ajax上传文件</h1>
<table>
    <tr>
        <td>文件上传</td>
    </tr>
    <tr>
        <td>文件描述：</td>
        <td><input type="text" name="mess" id="mess"></td>
    </tr>
    <tr>
        <td>上传文件</td>
        <td><input type="file" name="file" id="upfile"></td>
    </tr>
    <tr>
        <td><input type="submit" onclick="checkFile()" value="上传"/></td>
    </tr>
</table>
</body>
<script>
	// 在使用Ajax上传文件之前要先导入jQuery
    function checkFile() {
        var formData = new FormData();
        formData.append('file', $('#upfile')[0].files[0]);
        $.ajax({
            url:"/uploadSecond",
            type:"POST",
            data:formData,
            cache:false,
            processData:false,
            contentType:false,
            dataType: 'json',
            success:function (data) {
                // console.log(data);
                if (data == "1")
                    alert("上传成功");

            },
            error:function (data) {
                if (data == "0")
                    alert("上传失败");
            }
        });
    }
</script>
</html>

Controller层代码

package com.example.demo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

/**
 * @author Dream_飞翔
 * @email 1072876976@qq.com
 */
@Controller
public class MessController {
    @RequestMapping("uploadSecond")
	@ResponseBody
	public String upLoadSecond(MultipartFile file){
		System.out.println(file.getOriginalFilename());
		return "1";
    }
}

2、运行结果：

在这里插入图片描述

3、代码解析：

HTML代码

<table>
    <tr>
        <td>文件上传</td>
    </tr>
    <tr>
        <td>文件描述：</td>
        <td><input type="text" name="mess" id="mess"></td>
    </tr>
    <tr>
        <td>上传文件</td>
        <td><input type="file" name="file" id="upfile"></td>
    </tr>
    <tr>
        <td><input type="submit" onclick="checkFile()" value="上传"/></td>
    </tr>
</table>

与之前form表单上传文件的方式大致相同，不同点在于利用Ajax上传文件不需要使用form表单，但是在type类型为submit的<input>标签中需要添加一个单击事件，这个单击事件用于将用于处理要上传的文件

JavaScript代码

<script>
	// 在使用Ajax上传文件之前要先导入jQuery
    function checkFile() {
        var formData = new FormData();
        formData.append('file', $('#upfile')[0].files[0]);
        $.ajax({
            url:"/uploadSecond",
            type:"POST",
            data:formData,
            cache:false,
            processData:false,
            contentType:false,
            dataType: 'json',
            success:function (data) {
                if (data == "1")
                    alert("上传成功");

            },
            error:function (data) {
                if (data == "0")
                    alert("上传失败");
            }
        });
    }
</script>

需要注意的是在使用Ajax上传文件之前要先导入jQuery。

function checkFile() {
...
}

因为之前在<input>标签中添加了单击事件，添加的单击事件在这里进行定义做出怎样的处理

var formData = new FormData();

Ajax上传文件时传到后端的对象就是formData，也就是说我们是将这个formData对象传到了后端，所以在Ajax正式上传文件之前先声明formData对象

formData.append('file', $('#upfile')[0].files[0]);

在声明了一个formData对象以后，此时对象当中什么都没有，所以这个时候就要将想要上传的文件添加到formData对象中，append()方法中的第一个参数的意思为要添加到formData对象中的数据的类型为文件类型，第二个参数为文件对象，即$(’#file’)[0].files[0]就是我们要上传的文件。

$.ajax({
            url:"/uploadSecond",
            type:"POST",
            data:formData,
            cache:false,
            processData:false,
            contentType:false,
            dataType: 'json',
            success:function (data) {
                if (data == "1")
                    alert("上传成功");

            },
            error:function (data) {
                if (data == "0")
                    alert("上传失败");
            }
        });
    }

$.ajax({…});为Ajax上传文件的标准形式，url对应的值为数据接口（就是后面要被Controller层中拦截的值）
type提交方式为post，原因与form表单提交方式一致，在此不多做赘述
data为提交的数据，此时我们将formData对象整体进行上传
cache的值设置为false是因为上传文件不需要缓存
processData的值设置为false是因为data值也就是我们要上传的数据是FormData对象，不需要对数据做出处理
dataType的意思为返回值为json格式的数据
success：如果上传成功就执行这个function，这个方法中的参数data就是Controller层中返回的json对象，如果返回的json对象的值为1就在页面弹出提示框显示上传成功
error：与success的思路一致，如果上传失败就执行error后面的function，如果返回的json对象的值为0则弹出上传失败的提示框

Controller层代码

@RequestMapping("uploadSecond")
@ResponseBody
public String upLoadSecond(MultipartFile file){
	System.out.println(file.getOriginalFilename());
	return "1";
}

与form表单上传文件的代码思路一致，不同点在于返回前端的json对象的内容

总结

以上便是HTML界面如何上传文件的两种方式，本文用了一个简单的案例来讲述两种上传文件方法的原理，在理解了以后再回首看这些操作其实并没有那么复杂，但是在一开始没有静下心来认真的去理解一，所以才耗费了更多的时间。在此做一个记录，以后不允许自己再犯类似的错误，遇到问题时哪怕时间再紧张也要稳下来。再次感谢读者朋友能够看到这里，如果文章中有讲解不妥的地方欢迎在评论区指出，很高兴能够一起进步！

Dream_飞翔

关注

7
点赞
踩
25

收藏

觉得还不错? 一键收藏
打赏
3
评论
SpringMVC上传文件

文章目录前言一、form表单上传1、样例代码：HTML代码Controller层代码2、运行结果：3、代码解析：HTML代码Controller层代码二、Ajax上传1.引入库2.读入数据总结前言本文介绍前端HTML界面如何向后端发送文件的两种方式： form表单上传和Ajax上传两种方式，本文是基于Spring Boot项目的Web应用。之前在解决文件上传问题时走了不少弯路，在项目完成以后写下博客来记录自己的解决方法，以后再遇到类似的问题将不会再发生之前犯过的错误，如果内容有解释描述不妥之处，欢迎在
复制链接

扫一扫