Co oznacza enctype= 'multipart/form-data'?

Co oznacza enctype='multipart/form-data' w formie HTML i kiedy powinniśmy z niej korzystać?

Author: Mark Amery, 2010-12-24
Source

9 answers

Kiedy składasz żądanie POST, musisz w jakiś sposób zakodować dane, które tworzą treść żądania.

Formularze HTML zapewniają trzy metody kodowania.

  • application/x-www-form-urlencoded (domyślnie)
  • multipart/form-data
  • text/plain

Trwają prace nad dodaniem application/json, ale to zostało porzucone.

(inne kodowania są możliwe z żądaniami HTTP generowanymi za pomocą innych środków niż przesyłanie formularza HTML. JSON jest popularnym formatem dla używaj z usługami sieciowymi, a niektóre nadal używają SOAP.)

Specyfika formatów nie ma znaczenia dla większości programistów. Ważne punkty to:

  • nigdy nie używaj text/plain.

Kiedy piszesz kod po stronie klienta:

  • użyj multipart/form-data, gdy formularz zawiera dowolne <input type="file"> Elementy
  • w przeciwnym razie możesz użyć multipart/form-data lub application/x-www-form-urlencoded ale application/x-www-form-urlencoded będzie bardziej wydajny

Podczas pisania kodu po stronie serwera:

  • użyj przedpisanego biblioteka obsługi formularzy

Większość (jak Perl CGI->param lub ten, który jest wystawiony przez PHP $_POST superglobal) zajmie się różnicami za Ciebie. Nie próbuj analizować surowych danych wejściowych otrzymanych przez serwer.

Czasami znajdziesz bibliotekę, która nie obsługuje obu formatów. Węzeł.najpopularniejszą biblioteką js do obsługi danych formularza jest body-parser, który nie może obsługiwać żądań wieloczęściowych (ale ma dokumentację, która zaleca pewne alternatywy, które can).

Jeśli piszesz (lub debugujesz) bibliotekę do parsowania lub generowania nieprzetworzonych danych, musisz zacząć martwić się o format. Możesz też chcieć o tym wiedzieć ze względu na zainteresowanie.

application/x-www-form-urlencoded jest mniej więcej taki sam jak ciąg zapytania na końcu adresu URL.

multipart/form-data jest znacznie bardziej skomplikowana, ale pozwala na włączenie całych plików do danych. Przykład wyniku można znaleźć w specyfikacji HTML 4 .

text/plain jest wprowadzony przez HTML 5 i jest przydatny tylko do debugowania - od spec: nie są one niezawodnie interpretowane przez komputer - i argumentowałbym, że inne połączone z narzędziami (jak Panel sieci w narzędziach programistycznych większości przeglądarek) są do tego lepsze).

 1698
Author: Quentin,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-04-23 11:37:34

Kiedy powinniśmy go użyć

Odpowiedź Quentina jest prawidłowa: użyj multipart/form-data Jeśli formularz zawiera upload pliku, a application/x-www-form-urlencoded w przeciwnym razie, co jest domyślne, jeśli pominiesz enctype.

Idę do:

  • dodaj więcej referencji HTML5
  • wyjaśnij dlaczego ma rację z formularzem wyślij przykład

Odniesienia do HTML5

Istnieją trzy możliwości dla enctype:

Jak wygenerować przykłady

Kiedy zobaczysz przykład każdej z metod, staje się oczywiste, jak one działają i kiedy powinieneś z nich korzystać.

Możesz tworzyć przykłady użycie:

  • W tym celu należy skontaktować się z Działem obsługi klienta pod adresem .]}
    • Nie jest to jednak żaden problem.]}

Zapisz formularz do pliku .html: 

<!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>

Ustawiamy domyślną wartość tekstu na a&#x03C9;b, co oznacza aωb, ponieważ ω to U+03C9, które są bajtami 61 CF 89 62 w UTF-8.

Tworzenie plików do przesłania: 

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

Uruchom nasz mały serwer echo: 

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

Otwórz HTML w swojej przeglądarce, wybierz pliki i kliknij Wyślij i sprawdź terminal.

nc drukuje otrzymane żądanie.

Testowane na: Ubuntu 14.04.3, nc BSD 1.105, Firefox 40.

Multipart / form-data

Firefox wysłał: 

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--

Dla pliku binarnego i pola tekstowego bajty 61 CF 89 62 (aωb w UTF-8) są wysyłane dosłownie. Można to sprawdzić za pomocą nc -l localhost 8000 | hd, co mówi, że bajty: 

61 CF 89 62

Zostały wysłane (61 = = " a " i 62 == "b").

Dlatego jest jasne, że:

  • Content-Type: multipart/form-data; boundary=---------------------------735323031399963166993862150 ustawia typ zawartości na multipart/form-data i mówi, że pola są oddzielone podanym łańcuchem boundary.

    Ale zauważ, że: 

    boundary=---------------------------735323031399963166993862150

    MA o dwa mniej dadhes -- niż rzeczywista bariera 

    -----------------------------735323031399963166993862150

    Jest to spowodowane tym, że standard wymaga, aby granica zaczynała się od dwóch myślników --. Inne myślniki wydają się być tak, jak Firefox wybrał implementację arbitralnej granicy. RFC 7578 w 1999 roku w ramach programu "Horyzont 2020" powołano do życia organizację non-profit.]}

    4.1. "Boundary" parametr multipart / form-data

    Podobnie jak w przypadku innych typów wieloczęściowych, części są oddzielone za pomocą ogranicznik granic, skonstruowany przy użyciu CRLF,"--", oraz wartość parametr "boundary".

  • Każde pole otrzymuje nagłówki podrzędne przed danymi: Content-Disposition: form-data;, pole name, filename, a następnie dane.

    Serwer odczytuje dane do następny ciąg graniczny. Przeglądarka musi wybrać granicę, która nie pojawi się w żadnym z pól, dlatego granica może się różnić między żądaniami.

    Ponieważ mamy unikalną granicę, kodowanie danych nie jest konieczne: dane binarne są wysyłane tak, jak są.

    Do zrobienia: jaki jest optymalny rozmiar granicy (log(N) obstawiam) i nazwa / czas działania algorytmu, który go znajdzie? Zapytany w: https://cs.stackexchange.com/questions/39687/find-the-shortest-sequence-that-is-not-a-sub-sequence-of-a-set-of-sequences

  • Content-Type jest automatycznie określana przez przeglądarkę.

    Jak to jest dokładnie określone zostało zapytane: jak typ MIME przesłanego pliku jest określony przez przeglądarkę?

Application / x-www-form-urlencoded

Teraz zmień enctype na application/x-www-form-urlencoded, przeładuj przeglądarkę i / align = "left" /

Firefox wysłał: 

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

Najwyraźniej dane pliku nie zostały wysłane, tylko nazwy podstawowe. Więc to nie może być używane dla plików.

Jeśli chodzi o pole tekstowe, widzimy, że zwykłe drukowalne znaki, takie jak a i b były wysyłane w jednym bajcie, podczas gdy niedrukowalne, takie jak 0xCF i 0x89 zajmowały po 3 bajty każdy: %CF%89!

Porównanie

Przesyłane pliki często zawierają wiele niedrukowalnych znaków( np. obrazów), podczas gdy tekst tworzy prawie nigdy.

Z przykładów widzieliśmy, że:

  • multipart/form-data: dodaje kilka bajtów narzutu do wiadomości i musi poświęcić trochę czasu na jej obliczanie, ale wysyła każdy bajt w jednym bajcie.

  • application/x-www-form-urlencoded: ma granicę jednego bajtu na pole (&), ale dodaje liniowy współczynnik napowietrzności 3x dla każdego niedrukowalnego znaku.

Dlatego nawet gdybyśmy mogli wysyłać pliki z application/x-www-form-urlencoded, nie chcielibyśmy, ponieważ jest to tak nieefektywne.

Ale dla drukowalnych znaków znalezionych w polach tekstowych, nie ma to znaczenia i generuje mniej narzutu, więc po prostu go używamy.

 495
Author: Ciro Santilli TRUMP BAN IS BAD,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-05-07 10:37:18

enctype='multipart/form-data jest typem kodowania, który umożliwia wysyłanie plików za pośrednictwem POST . Po prostu, bez tego kodowania pliki nie mogą być wysyłane przez POST .

Jeśli chcesz zezwolić użytkownikowi na przesyłanie pliku za pomocą formularza, musisz użyć tego enctype .

 97
Author: Matt Asbury,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-12-12 11:30:07

Wysyłając formularz, każesz przeglądarce wysyłać za pośrednictwem protokołu HTTP wiadomość w sieci, odpowiednio otoczoną strukturą wiadomości protokołu TCP / IP. Strona HTML ma możliwość wysyłania danych do serwera: za pomocą <form> s.

Gdy formularz jest wysyłany, żądanie HTTP jest tworzone i wysyłane do serwera, wiadomość będzie zawierać nazwy pól w formularzu i wartości wypełnione przez użytkownika. Ta transmisja może się zdarzyć z POST lub GET metody HTTP .

  • POST mówi przeglądarce, aby zbudować wiadomość HTTP i umieścić całą treść w treści wiadomości (bardzo przydatny sposób robienia rzeczy, bardziej bezpieczny i elastyczny).
  • GET prześle dane formularza w zapytaniu . Ma pewne ograniczenia dotyczące reprezentacji danych i długości.

Jak wysłać formularz na Serwer

Atrybut enctype ma sens tylko przy użyciu metody POST. Gdy jest określony, to nakazuje przeglądarce wysłanie formularza poprzez kodowanie jego treści w określony sposób. Z MDN-Form enctype :

Gdy wartością atrybutu metody jest post, enctype jest MIME rodzaj treści, która służy do przesłania formularza na serwer.

  • application/x-www-form-urlencoded: to jest domyślne. Gdy formularz jest wysyłany, wszystkie nazwy i wartości są zbierane i kodowanie URL jest wykonywane na końcowym łańcuchu.
  • multipart/form-data: znaki nie są kodowane. Jest to ważne, gdy formularz ma kontrolę przesyłania plików. Chcesz wysłać plik binarny, a to zapewnia, że strumień bitowy nie zostanie zmieniony.
  • text/plain: spacje są konwertowane, ale kodowanie nie jest wykonywane.

Bezpieczeństwo

W związku z tym, że formularze mogą być przesyłane w formie papierowej, mogą pojawić się pewne obawy dotyczące bezpieczeństwa, jak określono w RFC 7578 Sekcja 7: wielostronicowe formularze-względy bezpieczeństwa danych :

Wszystkie programy do przetwarzania formularzy powinny traktować dostarczone przez użytkownika formularz-dane
z wrażliwością, ponieważ często zawiera poufne lub osobiste
dane identyfikacyjne. Istnieje powszechne stosowanie formularza " auto-fill" w 2007 roku firma została założona przez firmę Garmin Sp. z o. o., zajmującą się produkcją i dystrybucją sprzętu komputerowego.]} nieświadomie wysyłać poufne informacje po wypełnieniu w inny sposób
nieszkodliwe zadania. multipart / form-data nie dostarcza żadnych funkcji
do sprawdzania integralności, zapewnienia poufności, unikania użytkownika
dezorientacja lub inne zabezpieczenia; obawy te muszą być
adresowane przez aplikacje wypełniające i interpretujące formularze.

Aplikacje, które otrzymują formularze i je przetwarzają, muszą być ostrożne nie dostarczać danych do miejsca przetwarzania formularzy, które nie był przeznaczony do wysłania.

Jest to ważne przy interpretacji nazwy pliku zawartości -
Pole nagłówka Disposition, aby nie przypadkowo nadpisać plików w
miejsce na pliki odbiorcy.

To dotyczy ciebie, jeśli jesteś programistą, a twój serwer będzie przetwarzał formularze przesłane przez użytkowników, które mogą zawierać poufne informacje.

 87
Author: Andry,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-04-12 17:25:06

enctype='multipart/form-data' oznacza, że żadne znaki nie będą kodowane. dlatego ten typ jest używany podczas przesyłania plików na serwer.
Tak więc multipart/form-data jest używany, gdy formularz wymaga przesłania danych binarnych, takich jak zawartość pliku

 45
Author: GP Singh,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-10-13 21:09:54

Ustaw atrybut metody na POST, ponieważ zawartość pliku nie może być umieszczona wewnątrz parametru URL za pomocą formularza.

Ustaw wartość enctype na multipart / form-data, ponieważ dane będą podzielone na wiele części, po jednej dla każdego pliku i po jednej dla tekstu treści formularza, który może być z nimi wysłany.

 9
Author: sandy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-09-25 11:53:43
  • enctype(ENCode TYPE) atrybut określa, w jaki sposób dane formularza powinny być zakodowane podczas przesyłania ich do serwera.
  • multipart / form-data jest jedną z wartości atrybutu enctype, który jest używany w elemencie formularza, który ma przesłany plik. wieloczęściowy oznacza, że dane formularza dzielą się na wiele części i wysyłają do serwera.
 2
Author: Premraj,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-02-03 04:00:37

Zazwyczaj jest tak, gdy masz formularz POST, który wymaga przesłania pliku jako danych... to powie serwerowi, jak zakoduje przesłane dane, w takim przypadku nie zostanie zakodowany, ponieważ po prostu przeniesie i wyśle pliki na serwer, na przykład podczas przesyłania obrazu lub pliku pdf

 1
Author: Eric,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-03-10 09:29:45

Atrybut enctype określa, w jaki sposób dane formularza powinny być zakodowane podczas przesyłania ich do serwera.

Atrybut enctype może być użyty tylko jeżeli method= "post".

Żadne znaki nie są kodowane. Ta wartość jest wymagana, gdy używasz formularzy, które mają kontrolę przesyłania plików

Z W3Schools

 -2
Author: Rishad,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-11-14 02:25:17