Java 前端使用Ajax通过FormData传递文件和表单数据到后台

<form id="testform" method="post" >
        <input type="text" id="name" name="name" />    
        <input type="text" name="age" />
        <input type="text" name="hobby" />
        <input type="file" id="image" name="image" />
        <input id="yxrq" name="birthday" class="easyui-datebox" data-options="editable:false,width:200" />
    </form>
    <button id="tijiao" οnclick="tijiao()">提交</button>

 

1，当仅仅想上传文件到后台

function tijiao(){
        var file = $("#image")[0].files[0];
        //打印file 为对象
        console.log(file);
        var formObj = new FormData();
        formObj.set('image', file);
        $.ajax({
            url:'test/test3',
            data:formObj,
            type: 'POST',
            dataType:'json',
            processData:false,
            contentType:false,
            success:function(data){
                alert(data.Msg);
            }
        });
 
}   
 
@RequestMapping("/test3")
    public Map<String,Object> test3( @RequestParam("image") MultipartFile uploadFile)

 

2.上传表单数据和文件
var uploadFile = new FormData($("#testform")[0]);
        console.log(uploadFile);
            $.ajax({
                url:"test/test3",
                type:"post",
                data:uploadFile,
                cache: false, 
                dataType:'json',
                contentType: false, //不设置内容类型
                processData: false, //不处理数据
                success:function(data){
                    alert(data.Msg);
                }        
            });
 
@RequestMapping("/test3")
    public Map<String,Object> test3(Test test3, @RequestParam("image") MultipartFile uploadFile)//Test为实体类

 

3.上传多个表单数据，那么以json形式上传。

function tijiao(){
    var file = $("#image")[0].files[0];
    //打印file 为对象
    console.log(file);
    var formObj = new FormData();
    formObj.set('image', file);
    var formStr = JSON.stringify($('#testform').serializeJSON());
    formObj.set('test3', formStr);
    
        console.log(formObj);
            $.ajax({
                url:"test/test3",
                type:"post",
                data:formObj,
                cache: false, 
                dataType:'json',
                contentType: false, //不设置内容类型
                processData: false, //不处理数据
                success:function(data){
                    alert(data.Msg);
                }        
            });
} 
 
 @RequestMapping("/test3")
    public Map<String,Object> test3(String test3, @RequestParam("image") MultipartFile uploadFile) 
 

2.上传表单数据和文件