Springboot formdata ajax 表单数据和图片一起上传

html文件代码片段

<form id="studentAddForm" method="post" enctype="multipart/form-data" οnsubmit="return false">
	学号:
	<input id="studentNo" name="studentNo" type="text">
	</br>
	姓名:
	<input id="studentName" name="studentName" type="text">
	</br>
	性别:
	<input id="studentSex" name="studentSex" type="text">
	</br>
	头像:
	<input id="file" name="file" type="file">
	</br>
	<input type="button" value="添加" οnclick="checkForm()">
</form>

JS代码

<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楼评论)

JAVA

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还是有优势的,所以找到原因后又换回来了,总结下方便自己以后使用,也方便他人参考。


另: 本文中代码是简写的,从项目中扒出来改的,一是方便大家看,而是不至于透露项目信息,所以可能有错,但关键点的代码和使用方式是没问题的,当然也欢迎大家指正问题。






已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页