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:
|
<<: Verwenden von HTML+CSS zum Verfolgen von Mausbewegungen
>>: So bereinigen Sie Daten in einer MySQL-Onlinedatenbank
Artikel empfehlen
Diagramm der Konfigurationsmethode für die installationsfreie Version von MySQL5.6 für Windows Server 2008 64-Bit
1 Laden Sie das komprimierte Paket der MySQL 5.6-...
Bei der Installation von Docker Desktop wird eine Fehlermeldung angezeigt: Die WSL 2-Installation ist unvollständig (Beheben Sie die Fehlermeldung).
Fehlerbeschreibung Wenn wir Docker Desktop instal...
Tipps zum Erstellen von Web-Tabellenrahmen
<br />Tipps zum Erstellen von Web-Tabellenra...
Beispiel für die Installation und Bereitstellung von Docker unter Linux
Nachdem Sie den folgenden Artikel gelesen haben, ...
Zusammenfassung der Benutzererfahrung
Unabhängig davon, ob Sie an Software oder Websites...
Einführung in die UFW-Firewall unter Linux
Werfen wir einen Blick auf ufw (Uncomplicated Fir...
So richten Sie Nginx so ein, dass der Domänenname an den angegebenen Port weitergeleitet wird
Geben Sie /usr/local/nginx/conf ein sudo cd /usr/...
vue3+ts+EsLint+Prettier Standardcode-Implementierung
Inhaltsverzeichnis verwenden Verwendung von EsLin...
Detaillierter Prozess zum Konfigurieren eines HTTPS-Zertifikats unter Nginx
1. Der Unterschied zwischen HTTP und HTTPS HTTP: ...
Sehr detaillierte Anleitung zum Upgrade der MySQL-Version
Inhaltsverzeichnis 1. Einleitung 2. Sichern Sie d...
PageSpeed Optimierung im Überblick
Ich glaube, dass das Internet zu einem immer unve...
Ubuntu 16.04 64-Bit in drei Schritten mit 32-Bit-Programmen kompatibel
Schritt 1: Bestätigen Sie die Architektur Ihres S...
Beispiel zum Erstellen eines öffentlichen Harbor-Repository mit Docker
Im vorherigen Blogbeitrag ging es um das private ...
Implementierung einer Bildfragmentierungsladefunktion basierend auf HTML-Code
Heute werden wir einen fragmentierten Bildladeeff...
So passen Sie einen EventEmitter in node.js an
Inhaltsverzeichnis Vorwort 1. Was ist 2. So verwe...