HTML form enctype

http://www.w3.org/TR/html401/interact/forms.html#h-17.13.1%E2%80%8D

enctype= content-type [CI]

This attribute specifies the content type used to submit the form to the server (when the value of method is "post"). The default value for this attribute is "application/x-www-form-urlencoded". The value "multipart/form-data" should be used in combination with the INPUT element,type="file".

enctype 如果不写，默认为 application/x-www-form-urlencoded，如果提交内容包括 file input元素，则类型应该是 multipart/form-data。

enctype含义？

且看下面描述，浏览器处理表单过程的第三步，将表单数据集合编码，编码是根据enctype指定的content-type值。编码格式是HTTP协议的一部分，客户端和服务器都遵守。

Step three: Encode the form data set

The form data set is then encoded according to the content type specified by the enctype attribute of the FORM element.

但是 enctype是否就这两种类型？

看规范描述，只要求UA支持这两种类型，其他的content-type类型没有定义。

17.13.4 Form content types

The enctype attribute of the FORM element specifies the content type used to encode the form data set for submission to the server. User agents must support the content types listed below. Behavior for other content types is unspecified.

。。。

application/x-www-form-urlencoded

This is the default content type. Forms submitted with this content type must be encoded as follows:

。。。。

multipart/form-data

。。。

enctype用法试验

首先，只有使用POST方法的时候enctype才生效，GET方法默认使用 application/x-www-form-urlencoded 编码方法。

If the method is "get" and the action is an HTTP URI, the user agent takes the value of action, appends a`?'to it, then appends the form data set, encoded using the "application/x-www-form-urlencoded" content type. The user agent then traverses the link to this URI. In this scenario, form data are restricted to ASCII codes.

If the method is "post" and the action is an HTTP URI, the user agent conducts an HTTP "post" transaction using the value of the action attribute and a message created according to the content type specified by the enctype attribute.

构造一个含有file控件的form，还包括一个input框，变化enctype为以下值，查看请求报文都是按照 application/x-www-form-urlencoded 编码的：

1、不书写 enctype 属性

2、书写enctype但是值为空：

3、书写enctype值为未定义值：

4、书写enctype为

代码：

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <script src="./jquery.js"></script>

    <link rel="stylesheet" href="./test.css" />

</head>

<body>

    <style>

    </style>

    <form id="fileupload" name="fileupload" method="post" action="/index.php" enctype="sss">

        <input type="file" name="testfile"></br>

        <input type="text" name="textinput" value="textinputvalue"></br>

        <input type="submit" value="upload"></br>

    </form>

    <script>

    </script>

</body>

</html>

抓包：

POST http://wwwtestcom/index.php HTTP/1.1
Host: wwwtestcom
User-Agent: Mozilla/5.0 (Windows NT 6.1; rv:32.0) Gecko/20100101 Firefox/32.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: zh-cn,zh;q=0.8,en-us;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate
DNT: 0
Referer: http://wwwtestcom/fileupload.php
Connection: keep-alive
Content-Type: application/x-www-form-urlencoded
Content-Length: 56

testfile=%E5%91%A8%E6%8A%A5.txt&textinput=textinputvalue

修改enctype为 multipart/form-data

抓包：

POST http://wwwtestcom/index.php HTTP/1.1
Host: wwwtestcom
User-Agent: Mozilla/5.0 (Windows NT 6.1; rv:32.0) Gecko/20100101 Firefox/32.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: zh-cn,zh;q=0.8,en-us;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate
DNT: 0
Referer: http://wwwtestcom/fileupload.php
Connection: keep-alive
Content-Type: multipart/form-data; boundary=---------------------------734115918637
Content-Length: 299

-----------------------------734115918637
Content-Disposition: form-data; name="testfile"; filename="test.txt"
Content-Type: text/plain

-----------------------------734115918637
Content-Disposition: form-data; name="textinput"

textinputvalue
-----------------------------734115918637--

另外，演示下file控件可以选择多个文件的情况：

代码：

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <script src="./jquery.js"></script>

    <link rel="stylesheet" href="./test.css" />

</head>

<body>

    <style>

    </style>

    <form id="fileupload" name="fileupload" method="post" action="/index.php" enctype="multipart/form-data">

        <input type="file" name="testfile" multiple="multiple"></br>

        <input type="text" name="textinput" value="textinputvalue"></br>

        <input type="submit" value="upload"></br>

    </form>

    <script>

    </script>

</body>

</html>

选择两个文件，抓包 -- 可以看到报文体中，有两个 testfile 的PART，每个PART对应一个文件：

POST http://wwwtestcom/index.php HTTP/1.1
Host: wwwtestcom
User-Agent: Mozilla/5.0 (Windows NT 6.1; rv:32.0) Gecko/20100101 Firefox/32.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: zh-cn,zh;q=0.8,en-us;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate
DNT: 0
Referer: http://wwwtestcom/fileupload.php
Connection: keep-alive
Content-Type: multipart/form-data; boundary=---------------------------25276621921226
Content-Length: 451

-----------------------------25276621921226
Content-Disposition: form-data; name="testfile"; filename="test.txt"
Content-Type: text/plain

-----------------------------25276621921226
Content-Disposition: form-data; name="testfile"; filename="test1.txt"
Content-Type: text/plain

-----------------------------25276621921226
Content-Disposition: form-data; name="textinput"

textinputvalue
-----------------------------25276621921226--

HTML form enctype 属性试验的更多相关文章

HTML 5 <form> enctype 属性
值描述 application/x-www-form-urlencoded 在发送前对所有字符进行编码(默认). multipart/form-data 不对字符编码.当使用有文件上传控件的表单时, ...
C# HTTP系列10 form表单的enctype属性
系列目录 [已更新最新开发文章,点击查看详细] 在ASP.NET编程中经常遇到下面的代码片段,将人员信息以表单方式提交到后台程序并保存到服务器与数据库中. <form action=&q ...
表单中<form>的enctype属性
application/x-www-form-urlencoded.multipart/form-data.text/plain 上传文件的表单中<form>要加属性enctype=&qu ...
form表单标签的enctype属性的作用
Enctype是指定将数据回发到server时浏览器使用的编码类型.其编码类型有下面三种一. application/x-www-form-urlencoded 这是通过表单发送数据 ...
HTML <form> 标签的 enctype 属性
HTML <form> 标签定义和用法 enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码. 默认地,表单数据会编码为 "application/x-www- ...
form标签的 enctype属性
1.enctype的定义: enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码. 默认地,表单数据会编码为 "application/x-www-form-urlencod ...
Form的enctype属性
Form的enctype属性一般都使用html的Form表单通过HTTP POST方法发送Request body.下面是一个form: <form action="/process ...
Form表单标签的Enctype属性的作用及应用示例介绍
Enctype :指定将数据回发到服务器时浏览器使用的编码类型.用于表单里有图片上传. 编码类型有以下三种: application/x-www-form-urlencoded: 在发送前编码所有字符 ...
HTML表单（form）的“enctype”属性
Form元素的语法中,EncType表明提交数据的格式属性值: application/x-www-form-urlencoded:在发送前编码所有字符(默认) multipart/form-dat ...

随机推荐

当编译AFNetworking 2.0时出现了Undefined symbols for architecture i386
当将AFNetworking添加到工程后编译时出现 Undefined symbols for architecture i386: "_SecCertificateCopyData&quo ...
洛谷 P1379 八数码难题 Label:判重&&bfs
特别声明:紫书上抄来的代码,详见P198 题目描述在3×3的棋盘上,摆有八个棋子,每个棋子上标有1至8的某一数字.棋盘中留有一个空格,空格用0来表示.空格周围的棋子可以移到空格中.要求解的问题是:给 ...
js中的this关键字详解
this是Javascript语言的一个关键字. 它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用.比如, 复制代码代码如下: function test(){ this.x = 1; ...
Java_一致性哈希算法与Java实现
摘自:http://blog.csdn.net/wuhuan_wp/article/details/7010071 一致性哈希算法是分布式系统中常用的算法.比如,一个分布式的存储系统,要将数据存储到具 ...
浅析Spring中的注解
Spring的配置,通常有两种:使用配置文件和注解.那么Spring如何知道各个Bean或者Service.Controller以及Bean中各类属性之间的关系呢?答案肯定是在定义各个Java文件的时 ...
李洪强iOS经典面试题134-C语言
可能碰到的iOS笔试面试题(4)--C语言 C语言,开发的基础功底,iOS很多高级应用都要和C语言打交道,所以,C语言在iOS开发中的重要性,你懂的.里面的一些问题可能并不是C语言问题,但是属于计 ...
session/SessionFactory线程非安全和线程安全
SessionFactory负责创建session,SessionFactory是线程安全的,多个并发线程可以同时访问一个 SessionFactory 并从中获取Session实例. (Sessio ...
使用C#向ACCESS中插入数据（仅供参考）
1.创建并打开一个OleDbConnection对象 string strConn = " Provider = Microsoft.Jet.OLEDB.4.0 ; Data Source ...
运维、linux运维是什么？
从不知道运维是什么到后来接触了linux运维后来玩遍了运维常用的各种开源软件发现原来运维是这么回事又到了后来,运维真的是我理解的这些吗?会软件,会配置,会部署.会调优,会处理故障...但是总觉得 ...
lightetreeview
http://www.16css.com/menu/905.html 其他树形菜单:很好--1.http://www.cnblogs.com/zhhh/archive/2011/11/25/22637 ...

HTML form enctype 属性试验

HTML form enctype

Step three: Encode the form data set

17.13.4 Form content types

application/x-www-form-urlencoded

multipart/form-data

enctype用法试验

HTML form enctype 属性试验的更多相关文章

随机推荐

热门专题