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
So erkennen Sie mit Apache Tika, ob eine Datei beschädigt ist
Apache Tika ist eine Bibliothek zur Dateityperken...
Detaillierte Schritte zum Installieren und Debuggen einer MySQL-Datenbank unter CentOS7 [Beispiel]
Für dieses Beispiel ist das Herunterladen und Ins...
Ein Beispiel zum Abfragen von Daten in MySQL und zum Aktualisieren dieser Daten in eine andere Tabelle basierend auf Bedingungen
Dieser Artikel beschreibt anhand eines Beispiels,...
Einführung in den B-Tree-Einfügeprozess
Im vorherigen Artikel https://www.jb51.net/articl...
Warum TypeScripts Enum problematisch ist
Inhaltsverzeichnis Was ist passiert? Verwendung S...
Detaillierte Erklärung des Unterschieds zwischen der v-model-Direktive und dem .sync-Modifikator in Vue
Inhaltsverzeichnis V-Modell .sync Der Unterschied...
MySQL InnoDB-Quellcodeanalyse für Transaktionssperren
Inhaltsverzeichnis 1. Schloss und Riegel 2. Wiede...
So zeigen Sie Serverhardwareinformationen in Linux an
Hallo zusammen, heute ist Double 12, habt ihr sch...
Virtuelle Maschine klonen Linux Centos6.5 System Netzwerkkarte Konfiguration Grafik-Tutorial
Als Neuling, der gerade mit dem Linux-System in K...
So betreiben Sie eine MySql-Datenbank mit Gorm
1. Festlegen der Groß-/Kleinschreibung von Felder...
Tipps zum Escapen von HTML-Texten
Heute habe ich auf CSDN einen kleinen Trick zum Es...
Lösung für das Problem der MySQL-Transaktionsparallelität
Ich bin während der Entwicklung auf ein solches P...
Wie versteht JS Daten-URLs?
Inhaltsverzeichnis Überblick Erste Schritte mit D...
MAC+PyCharm+Flask+Vue.js-Build-System
Inhaltsverzeichnis Konfigurieren Sie node.js+nvm+...
Nützliche Codes zum Erstellen von Webseiten
<br />Wie kann ich die Bildlaufleiste auf de...