表单提交时编码类型enctype详解_html/css_WEB-ITnose

enctype = content-type [CI]

This attribute specifies the content typeused to submit the form to the server

立即学习“前端免费学习笔记（深入）”；

content type？这不就是我们在回调函数里判断返回数据的类型，并且是在请求头中的那个玩意儿吗？！没错！就是它！根据 HTML 4.01规范的基础数据类型的说明，这个content type 指定了连接资源的属性，同时也是MIME type的那些媒体类型。

表单编码类型

知道了表单编码由 enctype决定的，那么它究竟有多少可选的取值呢？是不是所有的MIME类型它都能用呢？

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

74

查看详情

实际上，根据 HTML5 规范中所叙述的， enctype具有以下三种选项，其中最后一项 text/plain是相比4.01新增的。

• application/x-www-form-urlencoded

• multipart/form-data

• text/plain

application/x-www-form-urlencoded

这是 默认的编码类型，使用该类型时，会将表单数据中 非字母数字的字符转换成转义字符，如"%HH"，然后组合成这种形式 key1=value1&key2=value2；所以后端在取数据后， 要进行解码。

注意：

• 若表单中有文件，则只留文件名；

multipart/form-data

该类型用于 高效传输文件、非ASCII数据和二进制数据，将表单数据逐项地分成不同的部分，用指定的分割符分割每一部分。每一部分都拥有 Content-Disposition头部，指定了该表单项的键名和一些其他信息；并且每一部分都有可选的 Content-Type，不特殊指定就为 text/plain。下面给出一个采用 multipart/form-data编码类型的例子：

Content-Type: multipart/form-data; boundary=AaB03x   --AaB03x   Content-Disposition: form-data; name="submit-name"   Larry   --AaB03x   Content-Disposition: form-data; name="files"; filename="file1.txt"   Content-Type: text/plain   ... contents of file1.txt ...       --AaB03x--

注意：

• 一般来说， method和 enctype是两个不同的互不影响的属性，但在传文件时， method必须要指定为 POST，否则文件只剩下filename了；

• 当没有传文件时， enctype会改回默认的 application/x-www-form-urlencoded。

text/plain

按照键值对排列表单数据 key1=value1\r\nkey2=value2，不进行转义。

注意：

• 若表单中有文件，则只留文件名；

application/json及其他MIME类型

另外，还需要说明表单数据编码类型 application/json，已经被W3C遗弃（详见 HTML JSON Form Submission），建议不要在

同理，其余的MIME类型，也不支持，均会替换成默认编码 application/x-www-form-urlencoded。

PS：貌似现在浏览器都不支持了，我先用了下面几个浏览器：

• FF43：Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:43.0) Gecko/20100101 Firefox/43.0

• Chrome49, Safari9.1：Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.87 Safari/537.36

明天去实验室试试IE~

后记

所以， enctype可以认为就是表单数据的 content type(MIME type)，只不过其取值不能用除了上面提到的三个，否则会转换成默认的编码。

今天掰扯完了表单提交时的编码类型 enctype，以及它和 content type、 MIME type的关系。下次再总结一下Ajax提交表单的类型吧。