Frage Was bedeutet enctype = 'multipart / form-data'?


Was macht enctype='multipart/form-data' gemein in einem HTML Form und wann sollten wir es verwenden?


1017
2017-12-24 12:19


Ursprung


Antworten:


Wenn Sie eine POST-Anfrage stellen, müssen Sie die Daten verschlüsseln, die den Hauptteil der Anfrage bilden.

HTML-Formulare bieten drei Methoden zur Codierung.

  • application/x-www-form-urlencoded (der Standard)
  • multipart/form-data
  • text/plain

Beim Hinzufügen wurde gearbeitet application/jsonAber das wurde aufgegeben.

Die Besonderheiten der Formate spielen für die meisten Entwickler keine Rolle. Die wichtigen Punkte sind:

Wenn Sie clientseitigen Code schreiben, ist alles, was Sie wissen müssen, ist benutzen multipart/form-data wenn Ihr Formular eine enthält <input type="file"> Elemente.

Wenn Sie serverseitigen Code schreiben: Verwenden Sie eine vorbereitete Formularbehandlungsbibliothek (z. B. Perls CGI->param oder die von PHP's entblößte $_POST superglobal) und es wird sich um die Unterschiede kümmern. Versuchen Sie nicht, die vom Server empfangenen Rohdaten zu analysieren.

Benutze niemals text/plain.


Wenn Sie eine Bibliothek zum Analysieren oder Generieren der Rohdaten schreiben (oder debuggen), müssen Sie sich über das Format Gedanken machen. Vielleicht möchten Sie es auch aus Interesse wissen.

application/x-www-form-urlencoded ist mehr oder weniger dasselbe wie eine Abfragezeichenfolge am Ende der URL.

multipart/form-data ist wesentlich komplizierter, erlaubt aber das Einbinden ganzer Dateien in die Daten. Ein Beispiel für das Ergebnis finden Sie in der HTML 4 Spezifikation.

text/plain wird von HTML 5 eingeführt und ist nur zum Debuggen von - nützlich die Spezifikation: Sie sind vom Computer nicht zuverlässig interpretierbar - und ich würde argumentieren, dass die anderen kombiniert mit Tools (wie der Net-Tab in den Entwicklertools der meisten Browser) besser dafür sind.


1147
2017-12-24 12:21



Wann sollten wir es benutzen?

Quentins Antwort ist richtig: benutzen multipart/form-data wenn das Formular einen Datei-Upload enthält, und application/x-www-form-urlencoded Andernfalls ist dies der Standardwert, wenn Sie weglassen enctype.

Ich werde:

  • Fügen Sie weitere HTML5-Verweise hinzu
  • erklären Warum Er hat recht mit einem Formular einreichen

HTML5-Verweise

Es gibt drei Möglichkeiten zum enctype:

Wie man die Beispiele erzeugt

Sobald Sie ein Beispiel für jede Methode sehen, wird es offensichtlich, wie sie funktionieren und wann Sie sie verwenden sollten.

Sie können Beispiele erstellen mit:

  • nc -l oder ein ECHO-Server
  • ein Benutzer-Agent wie ein Browser oder cURL

Speichern Sie das Formular auf ein Minimum .html Datei:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <title>upload</title>
</head>
<body>
<form action="http://localhost:8000" method="post" enctype="multipart/form-data">
  <p><input type="text" name="text1" value="text default">
  <p><input type="text" name="text2" value="a&#x03C9;b">
  <p><input type="file" name="file1">
  <p><input type="file" name="file2">
  <p><input type="file" name="file3">
  <p><button type="submit">Submit</button>
</form>
</body>
</html>

Wir setzen den Standard-Textwert auf a&#x03C9;b, was bedeutet aωb weil ω ist U+03C9, welche die Bytes sind 61 CF 89 62 in UTF-8.

Dateien zum Hochladen erstellen:

echo 'Content of a.txt.' > a.txt

echo '<!DOCTYPE html><title>Content of a.html.</title>' > a.html

# Binary file containing 4 bytes: 'a', 1, 2 and 'b'.
printf 'a\xCF\x89b' > binary

Führe unseren kleinen Echo Server aus:

while true; do printf '' | nc -l 8000 localhost; done

Öffnen Sie den HTML-Code in Ihrem Browser, wählen Sie die Dateien aus und klicken Sie auf Senden und überprüfen Sie das Terminal.

nc Gibt die empfangene Anfrage aus.

Getestet am: Ubuntu 14.04.3, ncBSD 1.105, Firefox 40.

Multipart / Formulardaten

Firefox gesendet:

POST / HTTP/1.1
[[ Less interesting headers ... ]]
Content-Type: multipart/form-data; boundary=---------------------------735323031399963166993862150
Content-Length: 834

-----------------------------735323031399963166993862150
Content-Disposition: form-data; name="text1"

text default
-----------------------------735323031399963166993862150
Content-Disposition: form-data; name="text2"

aωb
-----------------------------735323031399963166993862150
Content-Disposition: form-data; name="file1"; filename="a.txt"
Content-Type: text/plain

Content of a.txt.

-----------------------------735323031399963166993862150
Content-Disposition: form-data; name="file2"; filename="a.html"
Content-Type: text/html

<!DOCTYPE html><title>Content of a.html.</title>

-----------------------------735323031399963166993862150
Content-Disposition: form-data; name="file3"; filename="binary"
Content-Type: application/octet-stream

aωb
-----------------------------735323031399963166993862150--

Für die Binärdatei und das Textfeld die Bytes 61 CF 89 62 (aωb in UTF-8) werden buchstäblich gesendet. Du könntest das mit bestätigen nc -l localhost 8000 | hd, die besagt, dass die Bytes:

61 CF 89 62

wurde gesendet (61 == 'a' und 62 == "b").

Daher ist es klar, dass:

  • Content-Type: multipart/form-data; boundary=---------------------------9051914041544843365972754266 legt den Inhaltstyp auf fest multipart/form-data und sagt, dass die Felder durch das gegebene getrennt sind boundary Zeichenfolge.

  • Jedes Feld erhält einige Sub-Header vor seinen Daten: Content-Disposition: form-data;, das Feld name, das filename, gefolgt von den Daten.

    Der Server liest die Daten bis zur nächsten Grenzzeichenfolge. Der Browser muss eine Grenze auswählen, die in keinem der Felder angezeigt wird. Aus diesem Grund kann die Grenze zwischen den Anforderungen variieren.

    Da wir die eindeutige Grenze haben, ist keine Codierung der Daten notwendig: Binärdaten werden unverändert gesendet.

    TODO: Was ist die optimale Grenzgröße (log(N) Ich wette, und Name / Laufzeit des Algorithmus, der es findet? Gefragt bei: https://cs.stackexchange.com/questions/39687/find-the-shortest-sequence-that-is-not-a-sub-sequen-of-a-set-of-sequences

  • Content-Type wird automatisch vom Browser bestimmt.

    Wie es genau bestimmt wird, wurde gefragt: Wie wird der MIME-Typ einer hochgeladenen Datei vom Browser festgelegt?

Anwendung / x-www-form-urlencoded

Jetzt ändere die enctype zu application/x-www-form-urlencoded, laden Sie den Browser neu und reichen Sie ihn erneut ein.

Firefox gesendet:

POST / HTTP/1.1
[[ Less interesting headers ... ]]
Content-Type: application/x-www-form-urlencoded
Content-Length: 51

text1=text+default&text2=a%CF%89b&file1=a.txt&file2=a.html&file3=binary

Offensichtlich wurden die Dateidaten nicht gesendet, nur die Basisnamen. Dies kann nicht für Dateien verwendet werden.

Wie für das Textfeld sehen wir die üblichen druckbaren Zeichen wie a und b wurden in einem Byte gesendet, während nicht druckbare wie 0xCF und 0x89 nahm auf 3 Bytes jeder: %CF%89!

Vergleich

Datei-Uploads enthalten oft viele nicht-druckbare Zeichen (z. B. Bilder), während Textformulare fast nie tun.

Aus den Beispielen haben wir Folgendes gesehen:

  • multipart/form-data: Fügt der Nachricht ein paar Byte Grenzoverhead hinzu und muss einige Zeit damit verbringen, sie zu berechnen, sendet aber jedes Byte in einem Byte.

  • application/x-www-form-urlencoded: hat eine einzige Bytegrenze pro Feld (&), aber fügt a hinzu linear Gemeinkostenfaktor von 3x für jedes nicht druckbare Zeichen.

Daher auch, wenn wir Dateien mit versenden könnten application/x-www-form-urlencodedWir würden es nicht wollen, weil es so ineffizient ist.

Aber für druckbare Zeichen, die in Textfeldern gefunden werden, spielt es keine Rolle und erzeugt weniger Overhead, also verwenden wir es einfach.


298
2018-02-07 09:52



enctype='multipart/form-data ist ein Kodierungstyp, mit dem Dateien über eine POST. Ganz einfach, ohne diese Verschlüsselung können die Dateien nicht gesendet werden POST.

Wenn Sie einem Benutzer erlauben möchten, eine Datei über ein Formular hochzuladen, müssen Sie dies verwenden Art.


72
2017-12-24 12:49



Wenn Sie ein Formular abschicken, versuchen Sie, Ihrem Browser zu sagen, dass er eine Nachricht über das HTTP-Protokoll sendet, die ordnungsgemäß in eine Nachrichtenstruktur des TCP / IP-Protokolls eingebettet ist. Beim Senden von Daten können Sie verwenden POST oder GET  Methodenum Daten mit dem HTTP-Protokoll zu senden. POST weist Ihren Browser an, eine HTTP-Nachricht zu erstellen und den gesamten Inhalt in den Nachrichtentext einzufügen (eine sehr nützliche Methode, um Dinge sicherer und flexibler zu machen). GET hat einige Einschränkungen bezüglich Datendarstellung und Länge.

Angeben, was Sie senden

Wenn Sie eine Datei senden, müssen Sie dem HTTP-Protokoll mitteilen, dass Sie eine Datei mit mehreren Merkmalen und Informationen senden. Auf diese Weise ist es möglich, konsistent Daten an den Empfänger zu senden und die Datei mit dem aktuellen Format öffnen zu lassen usw. Dies ist eine Anforderung aus dem HTTP-Protokoll, wie gezeigt Hier

Sie können keine Dateien mit der Standardeinstellung senden enctype Parameter, weil Ihr Empfänger Probleme beim Lesen haben könnte (bedenken Sie, dass eine Datei ein Deskriptor für einige Daten für ein bestimmtes Betriebssystem ist, wenn Sie die Dinge so sehen, werden Sie vielleicht verstehen, warum es so wichtig ist, ein anderes zu spezifizieren enctype für Dateien).

Sicherheit nicht vergessen

Diese Vorgehensweise gewährleistet auch, dass einige Sicherheitsalgorithmen an Ihren Nachrichten arbeiten. Diese Informationen werden auch von Routern auf Anwendungsebene verwendet, um als gute Firewalls für externe Daten zu fungieren.

Nun, wie Sie sehen können, ist es keine dumme Sache mit einem bestimmten enctype für Dateien.


67
2017-12-24 17:50



enctype='multipart/form-data' bedeutet, dass keine Zeichen codiert werden. Aus diesem Grund wird dieser Typ beim Hochladen von Dateien auf den Server verwendet.
Damit multipart/form-data wird verwendet, wenn ein Formular erfordert, dass Binärdaten wie der Inhalt einer Datei hochgeladen werden


29
2017-07-04 09:13



Setzen Sie das Methodenattribut auf POST, da Dateiinhalt nicht mithilfe eines Formulars in einen URL-Parameter eingefügt werden kann.

Legen Sie den Wert von enctype auf multipart / form-data fest, da die Daten in mehrere Teile aufgeteilt werden, einer für jede Datei und einer für den Text des Formularkörpers, der mit ihnen gesendet werden kann.


9
2017-09-25 11:53



  • Art (ENCOde ART) Attribut gibt an, wie die Formulardaten bei der Übergabe an den Server codiert werden sollen.
  • Multipart / Formulardaten  ist einer der Werte des Attributs enctype, das im Formularelement verwendet wird und einen Dateiupload enthält. mehrteilig bedeutet form dividiert in mehrere Teile und an den Server senden.
    • Metapher Teil : ein HTML-Dokument hat zwei Teile: ein Kopf und ein Körper.

1
2017-12-27 01:29



Normalerweise ist dies der Fall, wenn Sie ein POST-Formular haben, das einen Datei-Upload als Daten durchführen muss ... das wird dem Server mitteilen, wie er die übertragenen Daten verschlüsselt, in diesem Fall wird er nicht verschlüsselt, da er nur übertragen und hochladen wird die Dateien zum Server, Wie zum Beispiel beim Hochladen eines Bildes oder eines PDFs


0
2018-03-10 09:29