Einführung in das Enctype-Attribut des Form-Tags und seine Anwendungsbeispiele

Enctype: Gibt den Kodierungstyp an, der vom Browser beim Zurücksenden von Daten an den Server verwendet wird. Wird zum Hochladen von Bildern in Formularen verwendet.

Es gibt drei Kodierungstypen:

application/x-www-form-urlencoded: Alle Zeichen vor dem Senden kodieren (Standard). Dies ist das Standardcodierungsformat.
multipart/form-data: Keine Zeichen kodieren. Dieser Wert muss verwendet werden, wenn ein Formular verwendet wird, das ein Steuerelement zum Hochladen von Dateien enthält.
text/plain: Die Formulardaten werden als einfacher Text ohne Steuerelemente oder Formatierungszeichen codiert.

Beispiel:

Code kopieren

Der Code lautet wie folgt:

<form action="${pageContext.request.contextPath}/imageUpload_saveOrUpdate.action" method="post" enctype="multipart/form-data">
<div>
<label>Bitte wählen Sie die Upload-Bildadresse:</label>
<input Typ="Datei" Name="Bild"/>
</div>
</div>
<div>
<input type="submit" value="Hochladen"/>
</div>
</form>

Die Bedeutung von enctype="multipart/form-data" im Formular besteht darin, die MIME-Kodierung des Formulars festzulegen. Standardmäßig ist das Kodierungsformat application/x-www-form-urlencoded, das nicht für Datei-Uploads verwendet werden kann; nur bei Verwendung von multipart/form-data können die Dateidaten vollständig übertragen werden.

enctype="multipart/form-data" wird zum Hochladen binärer Daten verwendet.

Wenn Sie den Wert des entsprechenden Formularfelds über das Request-Objekt auf der Serverseite abrufen möchten, sollten Sie das Attribut „enctype“ auf application/x-www-form-urlencoded setzen (also den Standardwert, der weggelassen werden kann).

Warum müssen Sie beim Hochladen von Dateien enctype="multipart/form-data" festlegen?

Denn: Wenn nach dem Setzen von enctype auf multipart/form-data die Zeichen nicht codiert sind, werden die Daten in binärer Form an den Server übertragen. Wenn Sie zu diesem Zeitpunkt eine Anforderung verwenden, können Sie den Wert des entsprechenden Formulars nicht direkt abrufen. Stattdessen sollten Sie das Stream-Objekt verwenden, um die an den Server übertragenen binären Daten zu decodieren und die Daten zu lesen.

Wenn Sie eine Datei hochladen möchten, müssen Sie den Enkotyp auf „multipart/form-data“ setzen.

<<: Detailliertes Beispiel der CSS3-Boxschatteneigenschaft

>>: Vue implementiert die Internationalisierung der Sprachumschaltung für Webseiten

So verwenden Sie den CocosCreator-Objektpool

Detaillierte grafische Anweisungen zum Herunterladen und Installieren der entpackten Version von MySQL 5.7.18 und zum Starten des MySQL-Dienstes

Artikel

Zusammenfassung der Methoden zum Überprüfen, ob der Port in Linux geöffnet ist

Einführung in das Enctype-Attribut des Form-Tags und seine Anwendungsbeispiele

So verwenden Sie den CocosCreator-Objektpool

Einführung in den Unterschied zwischen OBJECT- und EMBED-Tags zur Anzeige von Flash-Inhalten

Detaillierte Erläuterung des Prinzips der Vue-Überwachungsdaten

Detaillierte grafische Anweisungen zum Herunterladen und Installieren der entpackten Version von MySQL 5.7.18 und zum Starten des MySQL-Dienstes

Zusammenfassung der Methoden zum Überprüfen, ob der Port in Linux geöffnet ist

Implementierung eines einfachen Rechners mit Javascript

Lösung für den Konflikt zwischen Nginx und Backend-Port

So implementieren Sie die Anpassung des Echats-Diagramms an große Bildschirme

Ein- und Ausblenden von HTML-Elementen durch Anzeige oder Sichtbarkeit

Detaillierter Prozess zum Erstellen von MongoDB und MySQL mit Docker-Compose

Artikel empfehlen

Entwerfen Sie einen Datensammler mit Vue

So installieren Sie Docker unter CentOS und veröffentlichen Docker remote in Springboot

Ubuntu-Grundlagen-Tutorial: apt-get-Befehl

So installieren und konfigurieren Sie den Postfix-Mailserver unter CentOS 8

So implementieren Sie Hot Deployment und Hot Start in Eclipse/Tomcat

MySQL-Einstellungen zum Ändern des Root-Passworts, MySQL-Serververbindung, Diagramm allgemeiner MySQL-Befehle

Perfekte Lösung für das Zeitzonenproblem des Docker Alpine-Image

Unverzichtbares Wissen für Vorstellungsgespräche und schriftliche Tests im Bereich Webentwicklung (Pflichtlektüre)

Vue implementiert zwei Methoden zur Steuerung der Routing-Berechtigung

JavaScript implementiert eine bidirektionale verknüpfte Listenprozessanalyse

Implementierung der MySQL-Konfiguration SSL-Zertifikat-Login

Fallstudie zu JavaScript-Funktionsaufrufen, Apply- und Bind-Methoden

Teilen Sie 10 der neuesten Web-Frontend-Frameworks (Übersetzung)

Detaillierte Erklärung der Eigenschaften und Funktionen von Vuex

Ausführliche Erklärung des Binlogs in MySQL 8.0