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

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

前提：

页面中要引入
jquery-版本号.min.js

1.只获取页面传过来的文件

updata1.html

<form id="testform" method="post" >
    age<input type="text" id="age" name="age" />
    name<input type="text" name="name" />
    <input type="file" id="image" name="image" />
</form>
<button id="tijiao" onclick="tijiao()">提交</button>


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

    }

</script>

controller代码

//只获取页面传过来的图片
    @RequestMapping("/test/test1")
    @ResponseBody
    public Map<String,Object> test3( @RequestParam("image") MultipartFile uploadFile){

2.获取页面传过来的文件和参数

updata2.html

<form id="testform" method="post" >
    age<input type="text" id="age" name="age"  />
    name<input type="text" name="name" />
    <input type="file" id="image" name="image" />
</form>
<button id="tijiao" onclick="tijiao()">提交</button>

<script>
    function tijiao() {
        var uploadFile = new FormData($("#testform")[0]);
        $.ajax({
            url: "/test/test2",
            type: "post",
            data: uploadFile,
            cache: false,
            dataType: 'json',
            contentType: false, //不设置内容类型
            processData: false, //不处理数据
            success: function (data) {
                alert(data.Msg);
            }
        });
    }
</script>

controller

//获取页面传过来的文件和参数
    @RequestMapping("/test/test2")
    @ResponseBody
    public Map<String,Object> test2(String name,@RequestParam("image") MultipartFile uploadFile){

3.获取页面传过来的文件和实体(涉及到实体就不写上去了)

updata3.html

<form id="testform" method="post" >
    age<input type="text" id="age" name="age"  />
    name<input type="text" name="name" />
    <input type="file" id="image" name="image" />
</form>
<button id="tijiao" onclick="tijiao()">提交</button>

<script>
     function tijiao(){
        var uploadFile = new FormData($("#testform")[0]);
        $.ajax({
            url:"/test/test3",
            type:"post",
            data:uploadFile,
            dataType:'json',
            contentType: false, //不设置内容类型
            processData: false, //不处理数据
            success:function(data){
                alert(data.Msg);
            }
        });

    }
</script>

controller

//获取页面传过来的文件和参数
    @RequestMapping("/test/test3")
    @ResponseBody
    public Map<String,Object> test3(User user,@RequestParam("image") MultipartFile uploadFile){

4.获取页面传过来的多个不同参数文件和实体(涉及到实体就不写上去了)

updata4.html

<form id="testform" method="post" >
    age<input type="text" id="age" name="age"  />
    name<input type="text" name="name" />
    <input type="file" id="image" name="image" />
    <input type="file" id="file" name="file" />
</form>
<button id="tijiao" onclick="tijiao()">提交</button>

<script>
     function tijiao(){
        var uploadFile = new FormData($("#testform")[0]);
        $.ajax({
            url:'/test/test4',
            data:uploadFile,
            type: 'POST',
            dataType:'json',
            processData:false,
            contentType:false,
            success:function(data){
                alert(data.Msg);
            }
        });

    }
</script>

controller

//获取页面传过来的文件和参数
    @RequestMapping("/test/test4")
    @ResponseBody
    public Map<String,Object> test4(User user,@RequestParam("image") MultipartFile uploadFile,@RequestParam("file") MultipartFile uploadFile){

5.获取页面传过来的多个同参数文件和实体(涉及到实体就不写上去了)

updata5.html

<form id="testform" method="post" >
    age<input type="text" id="age" name="age"  />
    name<input type="text" name="name" />
    <input type="file" id="image" name="image" multiple/>
    <input type="file" id="file" name="file" multiple />
</form>
<button id="tijiao" onclick="tijiao()">提交</button>

<script>
     function tijiao(){
         var uploadFile = new FormData($("#testform")[0]);
        for(var i=0; i<$('#file')[0].files.length;i++){
            uploadFile.append('images', $('#image')[0].files[i]);
        }
        for(var i=0; i<$('#file')[0].files.length;i++){
            uploadFile.append('files', $('#file')[0].files[i]);
        }
         $.ajax({
            url:'/test/test5',
            data:uploadFile,
            type: 'POST',
            dataType:'json',
            processData:false,
            contentType:false,
            success:function(data){
                alert(data.Msg);
            }
        });

    }
</script>

controller

//获取页面传过来的文件和参数
    @RequestMapping("/test/test4")
    @ResponseBody
    public Map<String,Object> test4(User user, @RequestParam("images") MultipartFile[] uploadFile,@RequestParam("files") MultipartFile[] uploadFile1){