jquery+springboot realizes file upload function

This article example shares the specific code of jquery+springboot to realize the file upload function for your reference. The specific content is as follows

front end

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="max-age=21600" />
    <meta http-equiv="Expires" content="Mon, 18 Aug 2014 23:00:00 GMT" />
    <meta name="keywords" content="">
    <meta name="description" content="table/update.html">
</head>
 
<body>
    <span>-----------form submit--------------</span>
    <br>
    <span>-----------Single file--------------</span>
    <form action="/metadata/metaTables/single-file" method="post" enctype="multipart/form-data">
        <input type="file" name="meFile" />
        <p>
            <input type="submit" value="Submit" />
            <input type="reset" value="clear" />
        <p>
    </form>
    <span>-----------Single file + parameter->RequestParam receiving parameters</span>--------------</span>
    <form action="/metadata/metaTables/single-file-param" method="post" enctype="multipart/form-data">
        <input type="file" name="meFile" />
        name：<input name="name"></input>
        <p>
            <input type="submit" value="Submit" />
            <input type="reset" value="clear" />
        <p>
    </form>
    <span>-----------Single file + parameter->Object receiving parameters</span>--------------</span>
    <form action="/metadata/metaTables/single-file-object" method="post" enctype="multipart/form-data">
        <input type="file" name="meFile" />
        aaa:<input name="aaa"></input>
        bbb:<input name="bbb"></input>
        ccc:<input name="ccc"></input>
        <p>
            <input type="submit" value="Submit" />
            <input type="reset" value="clear" />
        <p>
    </form>
 
    <span>-----------Multiple files (parameter passing is the same as single file)--------------</span>
    <form action="/metadata/metaTables/many-file" method="post" enctype="multipart/form-data">
        <input type="file" name="meFile" multiple="multiple" />
        <p>
            <input type="submit" value="Submit" />
            <input type="reset" value="clear" />
        <p>
    </form>
    <span>------------Folder (all files under the folder)-------------</span>
    <form action="/metadata/metaTables/dir" method="post" enctype="multipart/form-data">
        <input type="file" name="meFile" webkitdirectory directory />
        <p>
            <input type="submit" value="Submit" />
            <input type="reset" value="clear" />
        <p>
    </form>
    <span>------------Ajax uploads files via FormData-------------</span>
    <br>
    <span>------------1. Use the form form to initialize the FormData object to upload the file-------------</span>
    <br>        
    <form id="ajax_formdata">
        aaa:<input name="aaa" value="1"></input>
        bbb:<input name="bbb" value="2"></input>
        ccc:<input name="ccc" value="3"></input>
        input<input id="ajax_formdata_file" type="file" name="meFile"/>
        <p>
            <button onclick="save()">Single input submit</button>
            <button onclick="remove1()">Clear 1</button>
            <button onclick="remove2()">Clear 2</button>
        <p>
    </form>
    <span>------------2. Use FormData object to add fields to upload files-------------</span>
    <form id="ajax_formdata1">
        aaa:<input name="aaa" value="4"></input>
        bbb:<input name="bbb" value="5"></input>
        ccc:<input name="ccc" value="6"></input>
        input<input id="ajax_formdata_file1" type="file" name="meFile"/>
        Multiple file submission <input id="ajax_formdata_file2" type="file" name="meFile" multiple="multiple"/>
        input<input id="ajax_formdata_file3" type="file" name="meFile"/>
        <p>
            <button onclick="save1()">Single input submit</button>
            <button onclick="save2()">Multiple file submission</button>
            <button onclick="save3()">Multiple input submission</button>
            <button onclick="remove1()">Clear 1</button>
            <button onclick="remove2()">Clear 2</button>
        </p>
    </form>
    <strong>How to accept MultipartFile on the backend depends on how to construct formData.append on the frontend</strong>
    <br>
    <strong>formData.append("meFile", File object)-->MultipartFile</strong>
    <br>
    <strong>formData.append("meFile", multiple File objects)-->MultipartFile[]</strong>
 
    <script src="../../assets/hplus/js/jquery.min.js?v=2.1.4"></script>
    <script src="../../assets/jquery.form.js"></script>
    <script>
        function save(){
            var formData = new FormData($('#ajax_formdata')[0]);
            $.ajax({
                url: '/metadata/metaTables/ajax-formdata',
                type: "post",
                data: formData,
                contentType: false,
                processData: false,
                success: function (data) {
                    alert("success")
                }
            });
        }
        function save1(){
            var formData = new FormData();
            var formJson = $('#ajax_formdata1').serializeJson();
            formData.append("num", 110)
            formData.append("test", JSON.stringify(formJson))
            formData.append("meFile", $('#ajax_formdata_file1')[0].files[0]);
            $.ajax({
                url: '/metadata/metaTables/ajax-formdata1',
                type: "post",
                data: formData,
                contentType: false,
                processData: false,
                success: function (data) {
                    alert("success")
                }
            });
        }
        function save2(){
            var formData = new FormData();
            formData.append("test", JSON.stringify({'aaa':111,'bbb':222,'ccc':333}))
            for(var f of $('#ajax_formdata_file2')[0].files)
                formData.append("meFile", f);
            $.ajax({
                url: '/metadata/metaTables/ajax-formdata2',
                type: "post",
                data: formData,
                contentType: false,
                processData: false,
                success: function (data) {
                    alert("success")
                }
            });
        }
        function save3(){
            debugger
            var formData = new FormData();
            formData.append('num',123456)
            for(let i=0;i<$('#ajax_formdata1 input[type="file"]').length;i++){
                for(let j=0;j<$('#ajax_formdata1 input[type="file"]')[i].files.length;j++){
                    formData.append("meFile", $('#ajax_formdata1 input[type="file"]')[i].files[j]);
                }
 
            }
            $.ajax({
                url: '/metadata/metaTables/ajax-formdata3',
                type: "post",
                data: formData,
                contentType: false,
                processData: false,
                success: function (data) {
                    alert("success")
                }
            });
        }
        function remove1(){
            alert("Achieved by replacing input")
            //The second type:
            var obj = document.getElementById('ajax_formdata_file');
            obj.outerHTML=obj.outerHTML;
        }
        function remove2(){
            alert("clear method")
            //The first type:
            var obj = document.getElementById('ajax_formdata_file');
            obj.select();
            document.selection.clear();
        }
        (function ($) {
            $.fn.serializeJson = function () {
                var serializeObj = {};
                var array = this.serializeArray();
                var str = this.serialize();
                $(array).each(function () {
                    if (serializeObj[this.name]) {
                        if ($.isArray(serializeObj[this.name])) {
                            serializeObj[this.name].push(this.value);
                        } else {
                            serializeObj[this.name] = [serializeObj[this.name], this.value];
                        }
                    } else {
                        serializeObj[this.name] = this.value;
                    }
                });
                return serializeObj;
            };
        })(jQuery);
    </script>
</body>
 
</html>

rear end

@RestController
@RequestMapping({ "/metadata/metaTables" })
public class MetaTablesController
{
    
 
    @PostMapping("single-file")
    public void singleFile(@RequestParam("meFile")MultipartFile multipartFile){
        System.out.println();
    }
    @PostMapping("single-file-param")
    public void singleFile(@RequestParam("meFile")MultipartFile multipartFile,@RequestParam("name")String name){
        System.out.println();
    }
    @PostMapping("single-file-object")
    public void singleFile(@RequestParam("meFile") MultipartFile multipartFile, Test test){
        System.out.println();
    }
    @PostMapping("many-file")
    public void manyFile(@RequestParam("meFile")MultipartFile[] multipartFile){
        System.out.println();
    }
    @PostMapping("dir")
    public void dir(@RequestParam("meFile")MultipartFile[] multipartFile){
        System.out.println();
    }
    @PostMapping("ajax-formdata")
    public void ajaxFormData(@RequestParam("meFile")MultipartFile multipartFile, Test test){
        System.out.println();
    }
    //Object receiving uses @RequestPart to pass json string, and others use @RequestParam
    @PostMapping("ajax-formdata1")
    public void ajaxFormData1(@RequestParam("meFile")MultipartFile multipartFile, @RequestPart("test") Test test, @RequestParam("num")int num){
        System.out.println();
    }
    @PostMapping("ajax-formdata2")
    public void ajaxFormData2(@RequestParam("meFile")MultipartFile[] multipartFile,@RequestPart("test") Test test){
        System.out.println();
    }
    @PostMapping("ajax-formdata3")
    public void ajaxFormData3(@RequestParam("meFile")MultipartFile[] multipartFile, @RequestParam("num")int num){
        System.out.println();
    }
 
}

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: