enctype='multipart/form-data'在HTML表单中意味着什么?我们应该何时使用它?


当前回答

当提交表单时,您告诉浏览器通过HTTP协议在网络上发送一条消息,该消息被正确封装在TCP/IP协议消息结构中。HTML页面有一种将数据发送到服务器的方法:使用<form>s。

提交表单时,将创建一个HTTP请求并将其发送到服务器,消息将包含表单中的字段名和用户填写的值。这种传输可以通过POST或GET HTTP方法进行。

POST告诉您的浏览器构建一个HTTP消息,并将所有内容放在消息正文中(这是一种非常有用的方式,更安全,也更灵活)。GET将提交查询字符串中的表单数据。它对数据表示和长度有一些限制。

说明如何将表单发送到服务器

属性enctype只有在使用POST方法时才有意义。如果指定,它将指示浏览器通过以特定方式编码表单内容来发送表单。来自MDN-表单enctype:

当method属性的值为post时,enctype为MIME用于向服务器提交表单的内容类型。

application/x-wwww-form-urlencoded:这是默认值。发送表单时,将收集所有名称和值,并对最终字符串执行URL编码。multipart/form数据:字符未编码。当表单具有文件上载控件时,这一点很重要。您希望发送文件二进制文件,这样可以确保比特流不会被更改。text/plain:空格被转换,但不再执行编码。

安全

提交表单时,可能会出现一些安全问题,如RFC 7578第7节:多部分表单数据-安全考虑:

所有表单处理软件应处理用户提供的表单数据敏感,因为它通常包含机密或个人信息识别信息。表单“自动填充”被广泛使用web浏览器中的功能;这些可能被用来欺骗用户在不知情的情况下发送机密信息无害的任务。多部分/表单数据不提供任何功能用于检查完整性、确保机密性、避免用户混淆或其他安全特征;这些担忧必须是由表单填充和表单数据解释应用程序解决。接收表格并处理表格的应用程序必须小心不向请求表单处理站点提供数据不打算发送。在解释内容的文件名时非常重要-Disposition头字段不会无意中覆盖收件人的文件空间。

如果您是一名开发人员,并且您的服务器将处理用户提交的表单,而这些表单最终可能包含敏感信息,这会让您感到担忧。

其他回答

enctype(ENCode TYPE)属性指定表单数据提交到服务器时应如何编码。multipart/formdata是enctype属性的值之一,用于具有文件上载的表单元素中。多部分是指将表单数据分成多个部分并发送到服务器。

我们应该什么时候使用它?

Quentin的答案是正确的:如果表单包含文件上载,则使用multipart/form数据,否则使用application/x-www-form-urlencoded,如果省略enctype,则默认使用。

我要:

添加更多HTML5引用用一个表单提交示例解释他为什么是正确的

HTML5引用

enctype有三种可能:

应用程序/x-wwww-form-urlencoded多部分/表单数据(规范指向RFC7578)text/plain。这是“计算机无法可靠解释的”,因此它不应用于生产,我们也不会进一步研究。

如何生成示例

一旦你看到了每种方法的一个例子,你就会明白它们是如何工作的,以及你应该何时使用每种方法。

可以使用以下方法生成示例:

nc-l或ECHO服务器:接受GET/POST请求的HTTP测试服务器用户代理,如浏览器或cURL

将表单保存为最小的.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>

我们将默认文本值设置为&#x03C9;b、 这意味着ωb,因为ω是U+03C9,即UTF-8中的字节61 CF 89 62。

创建要上载的文件:

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

运行我们的小型echo服务器:

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

在浏览器上打开HTML,选择文件,然后单击提交并检查终端。

nc打印收到的请求。

测试版本:Ubuntu 14.04.3,nc BSD 1.105,Firefox 40。

多部分/表单数据

Firefox已发送:

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

对于二进制文件和文本字段,字节61 CF 89 62(UTF-8中的aωb)按字面形式发送。您可以使用nc-l localhost 8000|hd进行验证,其中表示字节:

61 CF 89 62

已发送(61==“a”和62==“b”)。

因此,很明显:

内容类型:多部分/表单数据;boundary=-------------------------7353230313999963166993862150将内容类型设置为多部分/表单数据,并表示字段由给定的边界字符串分隔。但请注意:边界=-------------------------7353230313999963166993862150比实际屏障少两个破折号-----------------------------735323031399963166993862150这是因为标准要求边界以两个破折号--开头。其他破折号似乎正是Firefox选择实现任意边界的方式。RFC 7578明确提到,这两个前导破折号是必需的:4.1.多部分/表单数据的“边界”参数与其他多部分类型一样,这些部分用边界分隔符,使用CRLF、“--”和“边界”参数。每个字段在其数据之前都会得到一些子标题:Content Disposition:form data;,字段名、文件名,后跟数据。服务器读取数据,直到下一个边界字符串。浏览器必须选择一个不会出现在任何字段中的边界,因此这就是为什么边界在请求之间可能不同的原因。因为我们有唯一的边界,所以不需要对数据进行编码:二进制数据按原样发送。TODO:最佳边界大小(log(N)我打赌)是多少,以及找到它的算法的名称/运行时间?询问时间:https://cs.stackexchange.com/questions/39687/find-the-shortest-sequence-that-is-not-a-sub-sequence-of-a-set-of-sequences内容类型由浏览器自动确定。它是如何被精确地确定的问题是:上传文件的mime类型是如何被浏览器确定的?

应用程序/x-wwww-form-urlencoded

现在将enctype更改为application/x-wwww-form-urlencoded,重新加载浏览器,然后重新提交。

Firefox已发送:

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

显然,文件数据没有被发送,只有基本名称。因此,这不能用于文件。

对于文本字段,我们可以看到,通常的可打印字符(如a和b)以一个字节的形式发送,而不可打印字符如0xCF和0x89则各占3个字节:%CF%89!

比较

文件上载通常包含大量不可打印的字符(例如图像),而文本表单几乎从不包含这些字符。

从示例中我们可以看出:

multipart/form数据:为消息添加几个字节的边界开销,并且必须花费一些时间来计算,但每个字节都是一个字节。application/x-wwww-form-urlencoded:每个字段有一个单字节边界(&),但为每个不可打印字符添加3x的线性开销因子。

因此,即使我们可以发送带有application/x-www-form-urlencoded的文件,我们也不想这样做,因为这样效率太低了。

但对于文本字段中的可打印字符,这无关紧要,并且产生的开销也较少,所以我们只使用它。

当提交表单时,您告诉浏览器通过HTTP协议在网络上发送一条消息,该消息被正确封装在TCP/IP协议消息结构中。HTML页面有一种将数据发送到服务器的方法:使用<form>s。

提交表单时,将创建一个HTTP请求并将其发送到服务器,消息将包含表单中的字段名和用户填写的值。这种传输可以通过POST或GET HTTP方法进行。

POST告诉您的浏览器构建一个HTTP消息,并将所有内容放在消息正文中(这是一种非常有用的方式,更安全,也更灵活)。GET将提交查询字符串中的表单数据。它对数据表示和长度有一些限制。

说明如何将表单发送到服务器

属性enctype只有在使用POST方法时才有意义。如果指定,它将指示浏览器通过以特定方式编码表单内容来发送表单。来自MDN-表单enctype:

当method属性的值为post时,enctype为MIME用于向服务器提交表单的内容类型。

application/x-wwww-form-urlencoded:这是默认值。发送表单时,将收集所有名称和值,并对最终字符串执行URL编码。multipart/form数据:字符未编码。当表单具有文件上载控件时,这一点很重要。您希望发送文件二进制文件,这样可以确保比特流不会被更改。text/plain:空格被转换,但不再执行编码。

安全

提交表单时,可能会出现一些安全问题,如RFC 7578第7节:多部分表单数据-安全考虑:

所有表单处理软件应处理用户提供的表单数据敏感,因为它通常包含机密或个人信息识别信息。表单“自动填充”被广泛使用web浏览器中的功能;这些可能被用来欺骗用户在不知情的情况下发送机密信息无害的任务。多部分/表单数据不提供任何功能用于检查完整性、确保机密性、避免用户混淆或其他安全特征;这些担忧必须是由表单填充和表单数据解释应用程序解决。接收表格并处理表格的应用程序必须小心不向请求表单处理站点提供数据不打算发送。在解释内容的文件名时非常重要-Disposition头字段不会无意中覆盖收件人的文件空间。

如果您是一名开发人员,并且您的服务器将处理用户提交的表单,而这些表单最终可能包含敏感信息,这会让您感到担忧。

将方法属性设置为POST,因为不能使用表单将文件内容放入URL参数中。

将enctype的值设置为multipart/form数据,因为数据将被拆分为多个部分,每个文件一个,以及可能随它们一起发送的表单正文文本一个。

enctype属性指定表单数据提交到服务器时应如何编码。只有当method=“post”时,才能使用enctype属性。未编码任何字符。使用具有文件上载控件的表单时,需要此值

来自W3学校