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

2023-07-18 22:40:34

<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.上传表单数据和文件