Pregunta ¿Qué significa enctype = 'multipart / form-data'?


Que hace enctype='multipart/form-data' significa en una HTML forma y cuándo deberíamos usarlo?


1017
2017-12-24 12:19


origen


Respuestas:


Cuando realiza una solicitud POST, debe codificar los datos que forman el cuerpo de la solicitud de alguna manera.

Los formularios HTML proporcionan tres métodos de codificación.

  • application/x-www-form-urlencoded (el valor por defecto)
  • multipart/form-data
  • text/plain

Se estaba trabajando en agregar application/json, pero eso ha sido abandonado.

Los detalles de los formatos no importan a la mayoría de los desarrolladores. Los puntos importantes son:

Cuando escribe código del lado del cliente, todo lo que necesita saber es utilizar multipart/form-data cuando su formulario incluye <input type="file"> elementos.

Cuando está escribiendo el código del lado del servidor: Utilice una biblioteca de manejo de formularios preescrito (por ejemplo, Perl CGI->param o el expuesto por PHP $_POST superglobal) y se ocupará de las diferencias para usted. No se moleste en intentar analizar la entrada sin procesar recibida por el servidor.

Nunca usar text/plain.


Si está escribiendo (o depurando) una biblioteca para analizar o generar datos en bruto, entonces debe comenzar a preocuparse por el formato. También puede querer saberlo por interés.

application/x-www-form-urlencoded es más o menos lo mismo que una cadena de consulta al final de la URL.

multipart/form-data es significativamente más complicado, pero permite que archivos completos sean incluidos en los datos. Un ejemplo del resultado se puede encontrar en Especificación HTML 4.

text/plain es introducido por HTML 5 y es útil solo para la depuración, desde la especificación: No son confiablemente interpretables por computadora - y yo diría que los otros combinados con herramientas (como la pestaña Red en las herramientas de desarrollo de la mayoría de los navegadores) son mejores para eso).


1147
2017-12-24 12:21



cuando deberíamos usarlo

La respuesta de Quentin es correcta: use multipart/form-data si el formulario contiene una carga de archivo, y application/x-www-form-urlencoded de lo contrario, que es el valor predeterminado si omite enctype.

Voy a:

  • agregue algunas referencias más de HTML5
  • explique por qué él tiene razón con un ejemplo de envío de formulario

Referencias HTML5

Existen tres posibilidades para enctype:

Cómo generar los ejemplos

Una vez que ve un ejemplo de cada método, resulta obvio cómo funcionan y cuándo debe usar cada uno.

Puede producir ejemplos usando:

  • nc -l o un servidor ECHO
  • un agente de usuario como un navegador o cURL

Guarde el formulario a un mínimo .html archivo:

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

Configuramos el valor de texto predeterminado para a&#x03C9;b, lo que significa aωb porque ω es U+03C9, que son los bytes 61 CF 89 62 en UTF-8.

Crea archivos para cargar:

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

Ejecute nuestro pequeño servidor de eco:

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

Abra el HTML en su navegador, seleccione los archivos y haga clic en enviar y verifique la terminal.

nc imprime la solicitud recibida.

Probado en: Ubuntu 14.04.3, ncBSD 1.105, Firefox 40.

multipart / form-data

Firefox enviado:

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

Para el archivo binario y el campo de texto, los bytes 61 CF 89 62 (aωb en UTF-8) se envían literalmente. Puedes verificar eso con nc -l localhost 8000 | hd, que dice que los bytes:

61 CF 89 62

fueron enviados (61 == 'a' y 62 == 'b').

Por lo tanto, está claro que:

  • Content-Type: multipart/form-data; boundary=---------------------------9051914041544843365972754266 establece el tipo de contenido para multipart/form-data y dice que los campos están separados por el dado boundary cuerda.

  • cada campo obtiene algunos encabezados secundarios antes de sus datos: Content-Disposition: form-data;, el campo name, el filename, seguido de los datos.

    El servidor lee los datos hasta la siguiente cadena de límites. El navegador debe elegir un límite que no aparecerá en ninguno de los campos, por lo que este es el motivo por el que el límite puede variar entre las solicitudes.

    Debido a que tenemos el límite único, no es necesaria la codificación de los datos: los datos binarios se envían tal cual.

    TODO: ¿cuál es el tamaño de límite óptimo (log(N) Apuesto), y nombre / tiempo de ejecución del algoritmo que lo encuentra? Preguntado en: https://cs.stackexchange.com/questions/39687/find-the-shortest-sequence-that-is-not-a-sub-sequence-of-a-set-of-secuencias

  • Content-Type es determinado automáticamente por el navegador.

    Cómo se determina exactamente se preguntó en: ¿Cómo es el tipo de mime de un archivo cargado determinado por el navegador?

application / x-www-form-urlencoded

Ahora cambia el enctype a application/x-www-form-urlencoded, recarga el navegador y vuelve a enviarlo.

Firefox enviado:

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

Claramente, los datos del archivo no se enviaron, solo los basenames. Entonces esto no puede usarse para archivos.

En cuanto al campo de texto, vemos que los caracteres imprimibles habituales como a y b fueron enviados en un byte, mientras que los no imprimibles como 0xCF y 0x89 tomó 3 bytes cada: %CF%89!

Comparación

Las cargas de archivos a menudo contienen muchos caracteres no imprimibles (por ejemplo, imágenes), mientras que las formas de texto casi nunca lo hacen.

De los ejemplos que hemos visto eso:

  • multipart/form-data: agrega algunos bytes de sobrecarga de límite al mensaje, y debe pasar un tiempo calculando, pero envía cada byte en un byte.

  • application/x-www-form-urlencoded: tiene un límite de byte único por campo (&), pero agrega un lineal factor de sobrecarga de 3x por cada personaje no imprimible.

Por lo tanto, incluso si pudiéramos enviar archivos con application/x-www-form-urlencoded, no nos gustaría, porque es muy ineficiente.

Pero para los caracteres imprimibles que se encuentran en los campos de texto, no importa y genera menos sobrecarga, así que simplemente lo usamos.


298
2018-02-07 09:52



enctype='multipart/form-data es un tipo de codificación que permite que los archivos se envíen a través de un ENVIAR. Simplemente, sin esta codificación, los archivos no pueden enviarse a través de ENVIAR.

Si desea permitir que un usuario cargue un archivo a través de un formulario, debe usar esto enctype.


72
2017-12-24 12:49



Al enviar un formulario, está intentando decir que su navegador envía a través del protocolo HTTP un mensaje en la red que está envuelto adecuadamente en una estructura de mensaje de protocolo TCP / IP. Al enviar datos, puede usar POST o GET  métodospara enviar datos usando el protocolo HTTP. POST le dice a su navegador que cree un mensaje HTTP y que coloque todo el contenido en el cuerpo del mensaje (una forma muy útil de hacer las cosas, más segura y también más flexible). GET tiene algunas limitaciones sobre la representación de datos y la longitud.

Estableciendo lo que envía

Al enviar un archivo, es necesario decirle al protocolo HTTP que está enviando un archivo que tiene varias características e información dentro de él. De esta manera, es posible enviar datos al receptor de manera consistente y dejar que abra el archivo con el formato actual y así sucesivamente ... Este es un requisito del protocolo HTTP como se muestra aquí

No puede enviar archivos usando el valor predeterminado enctype parámetros porque su receptor puede tener problemas para leerlo (considere que un archivo es un descriptor de algunos datos para un sistema operativo específico, si ve las cosas de esta manera, tal vez comprenderá por qué es tan importante especificar un diferente enctype para archivos).

No olvides la seguridad

Esta forma de hacer las cosas también asegura que algunos algoritmos de seguridad funcionen en sus mensajes. Esta información también es utilizada por enrutadores de nivel de aplicación para actuar como buenos servidores de seguridad para datos externos.

Bueno, como pueden ver, no es una estupidez usar un específico enctype para archivos


67
2017-12-24 17:50



enctype='multipart/form-data' significa que no se codificarán caracteres. es por eso que este tipo se usa al cargar archivos al servidor.
Asi que multipart/form-data se utiliza cuando un formulario requiere datos binarios, como el contenido de un archivo, para ser cargado


29
2017-07-04 09:13



Establezca el atributo de método en POST porque el contenido del archivo no puede colocarse dentro de un parámetro de URL utilizando un formulario.

Establezca el valor de enctype en multipart / form-data porque los datos se dividirán en varias partes, una para cada archivo más una para el texto del cuerpo del formulario que se puede enviar con ellas.


9
2017-09-25 11:53



  • enctype (ENCoda TIPO) atributo especifica cómo los datos del formulario deben codificarse al enviarlo al servidor.
  • multipart / form-data  es uno de los valores del atributo enctype, que se usa en el elemento de formulario que tiene una carga de archivo. multiparte significa que los datos de los datos se dividen en partes múltiples y enviar al servidor.
    • metáfora parte : un documento HTML tiene dos partes: una cabeza y un cuerpo.

1
2017-12-27 01:29



Por lo general, esto es cuando tienes un formulario POST que necesita tomar una carga de archivo como datos ... esto le dirá al servidor cómo codificará los datos transferidos, en tal caso no se codificará porque solo transferirá y cargará los archivos al servidor, como por ejemplo al cargar una imagen o un pdf


0
2018-03-10 09:29