Question Que signifie enctype = 'multipart / form-data'?


Qu'est-ce que enctype='multipart/form-data' signifie dans un HTML forme et quand devrions-nous l'utiliser?


1017
2017-12-24 12:19


origine


Réponses:


Lorsque vous effectuez une requête POST, vous devez coder les données qui forment le corps de la requête d'une manière ou d'une autre.

Les formulaires HTML fournissent trois méthodes de codage.

  • application/x-www-form-urlencoded (le défaut)
  • multipart/form-data
  • text/plain

Des travaux étaient en cours pour l'ajout application/jsonmais cela a été abandonné.

Les spécificités des formats n'ont pas d'importance pour la plupart des développeurs. Les points importants sont:

Lorsque vous écrivez du code côté client, tout ce que vous devez savoir est utilisation multipart/form-data lorsque votre formulaire comprend <input type="file"> éléments.

Lorsque vous écrivez du code côté serveur: Utiliser une bibliothèque de gestion de formulaire pré-écrite (Par exemple, Perl's CGI->param ou celui exposé par PHP $_POST superglobal) et il prendra soin des différences pour vous. Ne vous embêtez pas à essayer d'analyser l'entrée brute reçue par le serveur.

Ne jamais utiliser text/plain.


Si vous écrivez (ou déboguez) une bibliothèque pour analyser ou générer les données brutes, vous devez commencer à vous soucier du format. Vous pourriez aussi vouloir en savoir par intérêt.

application/x-www-form-urlencoded est plus ou moins la même chose qu'une chaîne de requête à la fin de l'URL.

multipart/form-data est nettement plus compliqué mais permet d'inclure des fichiers entiers dans les données. Un exemple du résultat peut être trouvé dans le Spécification HTML 4.

text/plain est introduit par HTML 5 et est utile uniquement pour le débogage - de la spécification: Ils ne peuvent pas être interprétés de manière fiable par ordinateur - et je dirais que les autres combinés avec des outils (comme l'onglet Net dans les outils de développement de la plupart des navigateurs) sont meilleurs pour cela).


1147
2017-12-24 12:21



quand devrions-nous l'utiliser

La réponse de Quentin est juste: utiliser multipart/form-data si le formulaire contient un téléchargement de fichier, et application/x-www-form-urlencoded sinon, qui est le défaut si vous omettez enctype.

Je vais:

  • ajouter quelques références HTML5
  • Explique Pourquoi il a raison avec un exemple de soumission de formulaire

Références HTML5

Il y a trois possibilités pour enctype:

Comment générer les exemples

Une fois que vous voyez un exemple de chaque méthode, il devient évident comment ils fonctionnent, et quand vous devriez utiliser chacun d'eux.

Vous pouvez produire des exemples en utilisant:

  • nc -l ou un serveur ECHO
  • un agent utilisateur comme un navigateur ou un cURL

Enregistrez le formulaire à un minimum .html fichier:

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

Nous définissons la valeur de texte par défaut a&#x03C9;b, ce qui signifie aωb car ω est U+03C9, qui sont les octets 61 CF 89 62 en UTF-8.

Créez des fichiers à télécharger:

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

Exécutez notre petit serveur d'écho:

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

Ouvrez le code HTML sur votre navigateur, sélectionnez les fichiers et cliquez sur soumettre et vérifiez le terminal.

nc imprime la demande reçue.

Testé sur: Ubuntu 14.04.3, ncBSD 1.105, Firefox 40.

multipart / forme-données

Firefox envoyé:

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

Pour le fichier binaire et le champ de texte, les octets 61 CF 89 62 (aωb en UTF-8) sont envoyés littéralement. Vous pouvez vérifier cela avec nc -l localhost 8000 | hd, qui dit que les octets:

61 CF 89 62

ont été envoyé (61 == 'a' et 62 == 'b').

Par conséquent, il est clair que:

  • Content-Type: multipart/form-data; boundary=---------------------------9051914041544843365972754266 définit le type de contenu sur multipart/form-data et dit que les champs sont séparés par le donné boundary chaîne.

  • chaque champ reçoit des sous-en-têtes avant ses données: Content-Disposition: form-data;, le champ name, la filename, suivi par les données.

    Le serveur lit les données jusqu'à la chaîne de frontière suivante. Le navigateur doit choisir une limite qui n'apparaîtra dans aucun des champs, c'est pourquoi la limite peut varier entre les demandes.

    Parce que nous avons la limite unique, aucun codage des données n'est nécessaire: les données binaires sont envoyées telles quelles.

    TODO: quelle est la taille limite optimale (log(N) Je parie), et le nom / temps de fonctionnement de l'algorithme qui le trouve? Demandé à: https://cs.stackexchange.com/questions/39687/find-the-shortest-sequence-that-is-not-a-sub-sequence-of-a-set-of-sequences

  • Content-Type est automatiquement déterminé par le navigateur.

    Comment il est déterminé exactement a été demandé à: Comment le type mime d'un fichier téléchargé est-il déterminé par le navigateur?

application / x-www-forme-urlencodée

Maintenant, changez le enctype à application/x-www-form-urlencoded, rechargez le navigateur et renvoyez-le.

Firefox envoyé:

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

Clairement, les données du fichier n'ont pas été envoyées, seulement les noms de base. Donc, cela ne peut pas être utilisé pour les fichiers.

Comme pour le champ de texte, nous voyons que les caractères imprimables habituels comme a et b ont été envoyés dans un octet, tandis que les non-imprimables comme 0xCF et 0x89 a pris 3 octets chaque: %CF%89!

Comparaison

Les téléchargements de fichiers contiennent souvent beaucoup de caractères non imprimables (par exemple des images), tandis que les formulaires de texte ne le font presque jamais.

À partir des exemples, nous avons vu que:

  • multipart/form-data: ajoute quelques octets de limite de limite au message et doit passer du temps à le calculer, mais envoie chaque octet en un octet.

  • application/x-www-form-urlencoded: a une limite d'un octet par champ (&), mais ajoute linéaire facteur de frais généraux de 3x pour chaque caractère non imprimable.

Par conséquent, même si nous pouvions envoyer des fichiers avec application/x-www-form-urlencoded, nous ne voudrions pas, parce que c'est tellement inefficace.

Mais pour les caractères imprimables trouvés dans les champs de texte, cela n'a pas d'importance et génère moins de frais généraux, donc nous l'utilisons simplement.


298
2018-02-07 09:52



enctype='multipart/form-data est un type d'encodage qui permet d'envoyer des fichiers via un POSTER. Tout simplement, sans cet encodage, les fichiers ne peuvent pas être envoyés via POSTER.

Si vous souhaitez autoriser un utilisateur à télécharger un fichier via un formulaire, vous devez l'utiliser enctype.


72
2017-12-24 12:49



Lorsque vous soumettez un formulaire, vous essayez de dire à votre navigateur d'envoyer via le protocole HTTP un message sur le réseau correctement enveloppé dans une structure de message de protocole TCP / IP. Lors de l'envoi de données, vous pouvez utiliser POST ou GET  méthodesenvoyer des données en utilisant le protocole HTTP. POST dit à votre navigateur de créer un message HTTP et de mettre tout le contenu dans le corps du message (une façon très utile de faire les choses, plus sûr et flexible). GET a quelques contraintes sur la représentation et la longueur des données.

En indiquant ce que vous envoyez

Lors de l'envoi d'un fichier, il est nécessaire d'indiquer au protocole HTTP que vous envoyez un fichier ayant plusieurs caractéristiques et informations à l'intérieur. De cette façon, il est possible d'envoyer régulièrement des données au récepteur et de le laisser ouvrir le fichier avec le format actuel et ainsi de suite ... Ceci est une exigence du protocole HTTP comme indiqué ici

Vous ne pouvez pas envoyer de fichiers en utilisant par défaut enctype paramètres car votre récepteur peut rencontrer des problèmes de lecture (considérez qu'un fichier est un descripteur de certaines données pour un système d'exploitation spécifique, si vous voyez les choses de cette façon, vous comprendrez peut-être pourquoi il est si important de spécifier un autre enctype pour les fichiers).

Ne pas oublier la sécurité

Cette façon de faire garantit également que certains algorithmes de sécurité fonctionnent sur vos messages. Cette information est également utilisée par les routeurs au niveau de l'application afin d'agir comme pare-feu pour les données externes.

Eh bien, comme vous pouvez le voir, ce n'est pas une chose stupide en utilisant un spécifique enctype pour les fichiers.


67
2017-12-24 17:50



enctype='multipart/form-data' signifie qu'aucun caractère ne sera codé. C'est pourquoi ce type est utilisé lors du téléchargement de fichiers sur le serveur.
Alors multipart/form-data est utilisé lorsqu'un formulaire requiert que des données binaires, comme le contenu d'un fichier, soient téléchargées


29
2017-07-04 09:13



Définissez l'attribut method sur POST car le contenu du fichier ne peut pas être placé dans un paramètre d'URL à l'aide d'un formulaire.

Définissez la valeur de enctype sur multipart / form-data car les données seront divisées en plusieurs parties, une pour chaque fichier plus une pour le texte du corps du formulaire qui peut être envoyé avec eux.


9
2017-09-25 11:53



  • enctype (ENCode TYPE) spécifie comment les données de formulaire doivent être codées lors de la soumission au serveur.
  • multipart / forme-données  est l'un de la valeur de l'attribut enctype, qui est utilisé dans un élément de formulaire qui a un téléchargement de fichier. en plusieurs parties signifie former des données divise en plusieurs parties et envoyer au serveur.
    • métaphore partie : un document HTML a deux parties: une tête et un corps.

1
2017-12-27 01:29



Habituellement, c'est quand vous avez un formulaire POST qui doit prendre un fichier en tant que données ... cela indiquera au serveur comment il va encoder les données transférées, dans ce cas, il ne sera pas encodé car il va simplement transférer et télécharger les fichiers sur le serveur, comme par exemple lors du téléchargement d'une image ou d'un pdf


0
2018-03-10 09:29