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

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

Eine kurze Analyse des HTML-Space-Codes

11 Beispiele für die erweiterte Verwendung von Eingabeelementen in Webformularen

Einrichten der React-Native-Umgebung und grundlegende Einführung

Was sind die Dateiattribute von crw, brw, lrw usw. in Linux?

Beispiele für die Verwendung des ES6-Spread-Operators

Implementierung von Vergleichen, Sortieren und anderen Operationen für Daten vom Typ varchar in MySQL

Das Vue-Projekt realisiert das Zeichnen eines Wasserzeichens in einem bestimmten Bereich

React-Tipps zeigen Ihnen, wie Sie Probleme mit Hook-Abhängigkeiten beseitigen

Tomcat erhält den Clientdomänennamen des Nginx-Reverse-Proxys

Ein Artikel zum Erlernen von CSS3-Bildrändern

Artikel empfehlen

So verwenden Sie Docker-Container zur Implementierung der Proxy-Weiterleitung und Datensicherung

React-Internationalisierung – Verwendung von react-intl

Schritte zum Konfigurieren von Nginx SSL zur Implementierung des HTTPS-Zugriffs (für Anfänger geeignet)

Drei Möglichkeiten, das horizontale Div-Layout auf beiden Seiten auszurichten

Detaillierte Erklärung von Promises in JavaScript

Implementierung von Nginx Hot Deployment

Funktionsprinzip und Beispielanalyse des Linux-NFS-Mechanismus

Tutorial zur HTML-Tabellenauszeichnung (41): Breiten- und Höhenattribute der Tabellenüberschrift WIDTH, HEIGHT

Vue-Beispielcode mit dem Animationseffekt „Übergangskomponente“

Detaillierte Analyse und Verwendung des Befehls tcpdump unter Linux

So implementieren Sie Reaktionsfähigkeit beim Lernen des Vue-Quellcodes

Tutorial zur Installation von JDK Tomcat MySQL unter Linux (Fernzugriff über Mac)

Detaillierte Analyse des langsamen Abfrageproblems beim Senden von MySQL-Daten

Detaillierte Erklärung zur korrekten Verwendung der Zählfunktion in MySQL

5 Möglichkeiten zum Senden von E-Mails in der Linux-Befehlszeile (empfohlen)