html文件代码片段

<form id="studentAddForm" method="post" enctype="multipart/form-data" οnsubmit="return false">
	<input id="studentNo" name="studentNo" type="text">
	<input id="studentName" name="studentName" type="text">
	<input id="studentSex" name="studentSex" type="text">
	<input id="file" name="file" type="file">
	<input type="button" value="添加" οnclick="checkForm()">
</form>

<script>
    function checkForm() {
        var formData = new FormData($("#studentAddForm")[0]);
        $.ajax({
            url : "/saveStudentInfo",
            type : 'POST',
            data : formData,
            cache: false,
            async: false,
            processData : false,  //必须false才会避开jQuery对 formdata 的默认处理
            contentType : false,  //必须false才会自动加上正确的Content-Type
            success: function (data) {
                console.log("成功");
		layer.alert("增加成功", {icon: 6}, function () {
                    window.parent.location.reload(); //刷新父页面
                    // 获得frame索引
                    var index = parent.layer.getFrameIndex(window.name);
                    //关闭当前frame
                    parent.layer.close(index);
            error: function (data) {
                console.log("失败");
		layer.msg(data.message, {time: 2000});
</script>

• processData 设置为 false 。因为 data 值是 FormData 对象，不需要对数据做处理。
• <form> 标签添加 enctype="multipart/form-data" 属性。
• cache 设置为 false ，上传文件不需要缓存。
• contentType 设置为 false， 不设置 contentType 值， 因为是由 <form> 表单构造的 FormData 对象，且已经声明了属性 enctype="multipart/form-data" ，所以这里设置为false。

上传后，服务器端代码需要使用从查询参数名为 file 获取文件输入流对象，因为 <input> 中声明的是 name="file"

processData： 要求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象（从技术角度来讲并非字符串）以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息，请设置为false。

参考如下链接：

https://segmentfault.com/a/1190000007207128

https://blog.csdn.net/inuyasha1121/article/details/51915742

https://blog.csdn.net/ISaiSai/article/details/52211712 （1楼评论）

controller

@RequestMapping(value = "/saveStudentInfo", method= RequestMethod.POST)
public ResponseData studentInfoSave(@RequestParam("file") MultipartFile file, StudentInfoDO studentTemp) {
	String filename = URLEncoder.encode(file.getOriginalFilename(), "utf-8");
    InputStream inputStream = file.getInputStream();
	...//上传到第三方服务器（例如使用FTP传到自己搭建的FTP服务器）
	StudentInfoDO.setPicPath("ftp://ftphost:port/imageDir/" + filename);
	...//在Dao层将学生信息存到数据库
	...//其他
	return ResponseData.success("success","success");
StudentInfoDO
import java.io.Serializable;
public class StudentInfoDO implements Serializable {
    String studentNo;
    String studentName;
    String studentSex;
    String picPath;
    public String getStudentNo() {
        return studentNo;
    public void setStudentNo(String studentNo) {
        this.studentNo = studentNo;
    public String getStudentName() {
        return studentName;
    public void setStudentName(String studentName) {
        this.studentName = studentName;
    public String getStudentSex() {
        return studentSex;
    public void setStudentSex(String studentSex) {
        this.studentSex = studentSex;
    public String getPicPath() {
        return picPath;
    public void setPicPath(String picPath) {
        this.picPath = picPath;

PS：本次开发时查了很多各位大佬们的分享，主要纠结点在：AJAX将表单数据和图片提交给后台，后台一直接收不到，
processData : false,  //必须false才会避开jQuery对 formdata 的默认处理
contentType : false,  //必须false才会自动加上正确的Content-Type
这两个字段也这么设置过了可是Request Headers中的 Content-Type:false，可是后台一直接收不到数据，请求状态一直是500，后来查了半天最后居然是前台页面引用的jquery文件有问题，换了个引用结果就好了。。。。哎。。
这个错误出来之后一直找不到原因，后来暂时使用form表单的action动作进行的提交并没有使用AJAX,后台是可以接收到数据的，这个也是一个思路，但因为AJAX还是有优势的，所以找到原因后又换回来了，总结下方便自己以后使用，也方便他人参考。
另： 本文中代码是简写的，从项目中扒出来改的，一是方便大家看，而是不至于透露项目信息，所以可能有错，但关键点的代码和使用方式是没问题的，当然也欢迎大家指正问题。
                    html文件代码片段<form id="studentAddForm" method="post" enctype="multipart/form-data" onsubmit="return false">	学号：	<input id="studentNo" name="studentNo" type="text"&amp
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org...
				
参考：https://blog.csdn.net/wqh8522/article/details/78971260
https://blog.csdn.net/qq_41669724/article/details/80748952
html文件代码片段
<form id="studentAddForm" method="post" enctype="multipart/form-d...
最近在做一个项目，涉及到注册，需要表单数据和图片一起上传，我用的微擎自带的file_upload()函数。
需要下载 jQuery.upload.min.js 放到路径目录，然后引入到script标签
不多说，直接放代码~
实例代码：
html页面：
<form class="form1" action="add" method="post" encty...
				
vue+springboot+element上传表单数据和图片同时上传
参考文章： https://www.cnblogs.com/heikedeblack/p/14280885.html
前端代码：
<template>
	<el-form>
		<el-upload class="upload-demo" action="#" :auto-upload="false" :on-preview="handlePreview"
			:on-remove="handleRemo