form表单的enctype属性

表单数据编码详解

最新推荐文章于 2021-03-25 12:21:58 发布

原创最新推荐文章于 2021-03-25 12:21:58 发布 · 1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#form #表单 #enctype

web 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了HTML表单中三种不同的数据编码方式：application/x-www-form-urlencoded、multipart/form-data及text/plain。每种方式适用于不同场景，如普通表单提交、文件上传等，并解释了它们在GET和POST方法下的表现差异。

在<form>元素中，enctype属性为编码方式，指定在发送服务器之前应该如何对表单数据进行编码。其编码类型有三种：application/x-www-form-urlencoded、multipart/form-data、text/plain

1.application/x-www-form-urlencoded

默认编码类型，该类型会把表单中的数据编码为键值对，且所有字符会被编码（空格转换为'+'号，特殊符号转换为ASCII HEX值）。

(1).当method属性为GET时，表单中数据转换为'name1=value1&name2=value2&...'，并拼接到请求的url后面，以'?'分隔。queryString的URL encode采用的编码字符集取决于浏览器。如表单中有name:'小明'，age:18，采用UTF-8编码，则请求的URL为：...?name=%E5%B0%8F+%E6%98%8E&age=18

(2).当method属性为POST时，数据被添加到Http Body（请求体）中，浏览器会根据网页的ContentType("text/html; charset=UTF-8")中指定的编码进行对表单中的数据进行编码，请求数据同上：name=%E5%B0%8F+%E6%98%8E&age=18

2.multipart/form-data

不对字符编码，此时表单通常采用POST方式提交。该类型对表单以控件为单位进行分割，为每个部分加上Content-Disposition（form-data | file），Content-Type（默认text/plain），name（控件name）等信息，并加上分隔符（边界boundary）。一般用于上传文件，以二进制形式上传到服务器。

3.text/plain

空格转换为 "+" 加号，但不对特殊字符编码。

(1).GET：实际的请求URL中queryString进行URL encode，...?name=%E5%B0%8F+%E6%98%8E&age=18；浏览器地址栏中显示原始表单数据，不对字符进行编码，地址栏显示为：....?name=小+明&age=18。

(2).POST：表单数据添加到请求体中，不对字符进行编码，空格仍然显示为空格，不转为'+'号。

参考文章：

http://www.w3school.com.cn/tags/att_form_enctype.asp

http://www.cnblogs.com/haitao-fan/p/3399018.html