jquery+springboot realisiert die Datei-Upload-Funktion

In diesem Artikelbeispiel wird der spezifische Code von jquery+springboot zur Realisierung der Datei-Upload-Funktion zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt

Frontend

<!DOCTYPE html>
<html lang="de">
 
<Kopf>
    <Titel></Titel>
    <meta charset="utf-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Steuerung" content="max-age=21600" />
    <meta http-equiv="Läuft ab" content="Montag, 18. August 2014, 23:00:00 GMT" />
    <meta name="Schlüsselwörter" content="">
    <meta name="Beschreibung" content="Tabelle/Update.html">
</Kopf>
 
<Text>
    <span>-----------Formular absenden--------------</span>
    <br>
    <span>-----------Einzelne Datei---------------</span>
    <form action="/metadata/metaTables/einzelne-Datei" method="post" enctype="multipart/form-data">
        <input type="file" name="meFile" />
        <p>
            <input type="submit" value="Senden" />
            <input Typ="Zurücksetzen" Wert="Löschen" />
        <p>
    </form>
    <span>-----------Einzelne Datei + Parameter->RequestParam-Empfangsparameter</span>--------------</span>
    <form action="/metadata/metaTables/single-file-param" method="post" enctype="multipart/form-data">
        <input type="file" name="meFile" />
        Name: <Eingabename = "Name""></Eingabe>
        <p>
            <input type="submit" value="Senden" />
            <input Typ="Zurücksetzen" Wert="Löschen" />
        <p>
    </form>
    <span>-----------Einzelne Datei + Parameter->Objekt, das Parameter empfängt</span>--------------</span>
    <form action="/metadata/metaTables/single-file-object" method="post" enctype="multipart/form-data">
        <input type="file" name="meFile" />
        aaa:<Eingabename="aaa"></Eingabe>
        bbb:<Eingabename="bbb"></Eingabe>
        ccc:<Eingabename="ccc"></Eingabe>
        <p>
            <input type="submit" value="Senden" />
            <input Typ="Zurücksetzen" Wert="Löschen" />
        <p>
    </form>
 
    <span>-----------Mehrere Dateien (Parameterübergabe ist dasselbe wie bei einer einzelnen Datei)--------------</span>
    <form action="/metadata/metaTables/many-file" method="post" enctype="multipart/form-data">
        <input type="file" name="meFile" multiple="mehrere" />
        <p>
            <input type="submit" value="Senden" />
            <input Typ="Zurücksetzen" Wert="Löschen" />
        <p>
    </form>
    <span>------------Ordner (alle Dateien im Ordner)-------------</span>
    <form action="/metadata/metaTables/dir" method="post" enctype="multipart/form-data">
        <input type="file" name="meFile" webkitdirectory Verzeichnis />
        <p>
            <input type="submit" value="Senden" />
            <input Typ="Zurücksetzen" Wert="Löschen" />
        <p>
    </form>
    <span>------------Ajax lädt Dateien über FormData hoch-------------</span>
    <br>
    <span>------------1. Verwenden Sie das Formularformular, um das FormData-Objekt zum Hochladen der Datei zu initialisieren-------------</span>
    <br>        
    <Formular-ID="ajax_formdata">
        aaa:<Eingabename="aaa" Wert="1"></Eingabe>
        bbb:<Eingabename="bbb" Wert="2"></Eingabe>
        ccc:<Eingabename="ccc" Wert="3"></Eingabe>
        Eingabe<input id="ajax_formdata_file" type="file" name="meFile"/>
        <p>
            <button onclick="save()">Einzelne Eingabe senden</button>
            <button onclick="remove1()">Löschen 1</button>
            <button onclick="remove2()">Löschen 2</button>
        <p>
    </form>
    <span>------------2. Verwenden Sie das FormData-Objekt, um Felder zum Hochladen von Dateien hinzuzufügen-------------</span>
    <Formular-ID="ajax_formdata1">
        aaa:<Eingabename="aaa" Wert="4"></Eingabe>
        bbb:<Eingabename="bbb" Wert="5"></Eingabe>
        ccc:<Eingabename="ccc" Wert="6"></Eingabe>
        Eingabe<input id="ajax_formdata_file1" type="file" name="meFile"/>
        Übermittlung mehrerer Dateien <input id="ajax_formdata_file2" type="file" name="meFile" multiple="multiple"/>
        Eingabe<input id="ajax_formdata_file3" type="file" name="meFile"/>
        <p>
            <button onclick="save1()">Einzelne Eingabe senden</button>
            <button onclick="save2()">Mehrere Dateien übermitteln</button>
            <button onclick="save3()">Mehrere Eingaben übermitteln</button>
            <button onclick="remove1()">Löschen 1</button>
            <button onclick="remove2()">Löschen 2</button>
        </p>
    </form>
    <strong>Wie MultipartFile auf dem Backend akzeptiert wird, hängt davon ab, wie formData.append auf dem Frontend erstellt wird</strong>
    <br>
    <strong>formData.append("meFile", Dateiobjekt)-->MultipartFile</strong>
    <br>
    <strong>formData.append("meFile", mehrere File-Objekte)-->MultipartFile[]</strong>
 
    <script src="../../assets/hplus/js/jquery.min.js?v=2.1.4"></script>
    <script src="../../assets/jquery.form.js"></script>
    <Skript>
        Funktion speichern(){
            var formData = neue FormData($('#ajax_formdata')[0]);
            $.ajax({
                URL: '/metadata/metaTables/ajax-formdata',
                Typ: "Beitrag",
                Daten: Formulardaten,
                Inhaltstyp: false,
                Prozessdaten: false,
                Erfolg: Funktion (Daten) {
                    Alarm("Erfolg")
                }
            });
        }
        Funktion save1(){
            var formData = neue 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',
                Typ: "Beitrag",
                Daten: Formulardaten,
                Inhaltstyp: false,
                Prozessdaten: false,
                Erfolg: Funktion (Daten) {
                    Alarm("Erfolg")
                }
            });
        }
        Funktion save2(){
            var formData = neue FormData();
            formData.anhängen("test", JSON.stringify({'aaa':111,'bbb':222,'ccc':333}))
            für (var f von $('#ajax_formdata_file2')[0].files)
                formData.append("meFile", f);
            $.ajax({
                URL: '/metadata/metaTables/ajax-formdata2',
                Typ: "Beitrag",
                Daten: Formulardaten,
                Inhaltstyp: false,
                Prozessdaten: false,
                Erfolg: Funktion (Daten) {
                    Alarm("Erfolg")
                }
            });
        }
        Funktion save3(){
            Debugger
            var formData = neue FormData();
            formData.append('num',123456)
            für (lass i = 0; i <$('#ajax_formdata1 input[type="file"]').length;i++) {
                für (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',
                Typ: "Beitrag",
                Daten: Formulardaten,
                Inhaltstyp: false,
                Prozessdaten: false,
                Erfolg: Funktion (Daten) {
                    Alarm("Erfolg")
                }
            });
        }
        Funktion remove1(){
            alert("Erreicht durch Ersetzen der Eingabe")
            //Der zweite Typ:
            var obj = document.getElementById('ajax_formdata_file');
            obj.äußeresHTML=obj.äußeresHTML;
        }
        Funktion remove2(){
            Alarm("Methode löschen")
            //Der erste Typ:
            var obj = document.getElementById('ajax_formdata_file');
            Objekt.Auswahl();
            Dokument.Auswahl.Löschen();
        }
        (Funktion ($) {
            $.fn.serializeJson = Funktion () {
                var serializeObj = {};
                var array = this.serializeArray();
                var str = this.serialize();
                $(Array).jedes(Funktion () {
                    wenn (serializeObj[dieser.name]) {
                        wenn ($.isArray(serializeObj[this.name])) {
                            serializeObj[dieser.Name].push(dieser.Wert);
                        } anders {
                            serializeObj[dieser.name] = [serializeObj[dieser.name], dieser.wert];
                        }
                    } anders {
                        serializeObj[dieser.Name] = dieser.Wert;
                    }
                });
                SerializeObj zurückgeben;
            };
        })(jQuery);
    </Skript>
</body>
 
</html>

hinteres Ende

@RestController
@RequestMapping({ "/metadata/metaTables" })
öffentliche Klasse MetaTablesController
{
    
 
    @PostMapping("einzelne Datei")
    öffentliche void Einzeldatei(@RequestParam("meFile")MultipartFile MultipartFile){
        System.out.println();
    }
    @PostMapping("Einzeldatei-Parameter")
    öffentliche void Einzeldatei(@RequestParam("meFile")MultipartFile multipartFile,@RequestParam("name")String name){
        System.out.println();
    }
    @PostMapping("Einzeldateiobjekt")
    öffentliche void Einzeldatei(@RequestParam("meFile") MultipartFile MultipartFile, Test test){
        System.out.println();
    }
    @PostMapping("viele Dateien")
    öffentliche Leere vieleDateien(@RequestParam("meFile")MultipartFile[] multipartFile){
        System.out.println();
    }
    @PostMapping("dir")
    öffentliches Void-Dir (@RequestParam ( "meFile") MultipartFile [] multipartFile) {
        System.out.println();
    }
    @PostMapping("ajax-formdata")
    öffentliche void ajaxFormData(@RequestParam("meFile")MultipartFile multipartFile, Test test){
        System.out.println();
    }
    //Beim Empfangen von Objekten wird @RequestPart zum Übergeben der JSON-Zeichenfolge verwendet, andere verwenden @RequestParam
    @PostMapping("ajax-formdata1")
    öffentliche void ajaxFormData1(@RequestParam("meFile")MultipartFile multipartFile, @RequestPart("test") Test test, @RequestParam("num")int num){
        System.out.println();
    }
    @PostMapping("ajax-formdata2")
    öffentliche void ajaxFormData2(@RequestParam("meFile")MultipartFile[] multipartFile,@RequestPart("test") Test test){
        System.out.println();
    }
    @PostMapping("ajax-formdata3")
    öffentliche void ajaxFormData3(@RequestParam("meFile")MultipartFile[] multipartFile, @RequestParam("num")int num){
        System.out.println();
    }
 
}

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

SpringBoot implementiert die Datei-Upload-Funktion
Implementierung von SpringBoot-Funktionen zum Hoch- und Herunterladen von Dateien oder Bildern
Implementierungscode der Datei-Upload-Funktion von Springboot+Thymeleaf
SpringBoot implementiert Funktionen zum Hochladen einzelner und mehrerer Dateien

<<: Verwenden von HTML+CSS zum Verfolgen von Mausbewegungen

>>: So bereinigen Sie Daten in einer MySQL-Onlinedatenbank