49667511

在学习PHP文件上传的过程中发现，HTML表单需要设置enctype="multipart/form-data"这个属性，虽然不这么设置的确无法上传，但这是为什么呢？

HTML表单如何打包数据文件是由enctype这个属性决定的。enctype有以下几种取值：

application/x-www-form-urlencoded在发送前编码所有字符（默认）（空格被编码为’+’，特殊字符被编码为ASCII十六进制字符）
multipart/form-data
text/plain

默认enctype=application/x-www-form-urlencoded，所以表单的内容会按URL规则编码，然后根据表单的提交方法：

method=’get’ 编码后的表单内容附加在请求连接后
method=’post’ 编码后的表单内容作为post请求的正文内容

我们通过抓包软件来分析一下这几种方式产生的请求的差别

实验一

条件

method='get'
enctype=application/x-www-form-urlencoded

对应的html代码为：

<form action="xxx" method="get"> <input type="text" name="name"> <input type="file" name="file"/> <input type="submit" value="submit" name="submit"> </form>

文本框中输入"hello world"，选择文件，点击提交，浏览器发出的HTML包为：

GET /xxx?name=%22hello+world%22&file=temp.png&submit=submit HTTP/1.1 Host: hello.app Connection: keep-alive Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 Upgrade-Insecure-Requests: 1 User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.80 Safari/537.36 Referer: http://hello.app/formtest.html Accept-Encoding: gzip, deflate, sdch Accept-Language: zh-CN,zh;q=0.8,en;q=0.6

因为是get请求，所以只有头部没有正文。请求的链接为/xxx?name=hello+world.&file=temp.png&submit=submit，可以看到表单的信息已经被编码到URL中了。

注意两点：

"hello world"被编码为%22hello+world%22，特殊字符和空格都被编码
type='file'提交的文件内容并没有被提交，只是把文件名编码到了URL中

实验二

条件

method='post'
enctype=application/x-www-form-urlencoded

对应的html代码为：

<form action="xxx" method=" post"> <input type="text" name="name"> <input type="file" name="file"/> <input type="submit" value="submit" name="submit"> </form>

文本框中输入"hello world"，选择文件，点击提交，浏览器发出的HTML包为：

POST /xxx HTTP/1.1 Host: hello.app Connection: keep-alive Content-Length: 50 Cache-Control: max-age=0 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 Origin: http://hello.app Upgrade-Insecure-Requests: 1 User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.80 Safari/537.36 Content-Type: application/x-www-form-urlencoded Referer: http://hello.app/formtest.html Accept-Encoding: gzip, deflate Accept-Language: zh-CN,zh;q=0.8,en;q=0.6  name=%22hello+world%22&file=temp.png&submit=submit

与get请求相比，只是把name=hello+world.&file=temp.png&submit=submit放在了正文中，其他没有区别了

注意两点：

"hello world"被编码为%22hello+world%22，特殊字符和空格都被编码
type='file'提交的文件内容并没有被提交，只是把文件名编码到了正文中

实验三

条件

method='get'
enctype='multipart/form-data'

对应的html代码为：

<form action="xxx" method=" get" enctype="multipart/form-data"> <input type="text" name="name"> <input type="file" name="file"/> <input type="submit" value="submit" name="submit"> </form>

文本框中输入"hello world"，选择文件，点击提交，浏览器发出的HTML包为：

GET /xxx?name=%22hello+world%22&file=temp.png&submit=submit HTTP/1.1 Host: hello.app Connection: keep-alive Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 Upgrade-Insecure-Requests: 1 User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.80 Safari/537.36 Referer: http://hello.app/formtest.html Accept-Encoding: gzip, deflate, sdch Accept-Language: zh-CN,zh;q=0.8,en;q=0.6

结果和实验一一模一样，说明get和multipart/form-data配合无效。

实验四

条件

method='post'
enctype=multipart/form-data

对应的html代码为：

<form action="xxx" method=" post" enctype="multipart/form-data"> <input type="text" name="name"> <input type="file" name="file"/> <input type="submit" value="submit" name="submit"> </form>

文本框中输入"hello world"，选择文件，点击提交，浏览器发出的HTML包为：

POST /xxx HTTP/1.1 Host: hello.app Connection: keep-alive Content-Length: 3695 Cache-Control: max-age=0 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 Origin: http://hello.app Upgrade-Insecure-Requests: 1 User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.80 Safari/537.36 Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryIZDrYHwuf2VJdpHw Referer: http://hello.app/formtest.html Accept-Encoding: gzip, deflate Accept-Language: zh-CN,zh;q=0.8,en;q=0.6  ------WebKitFormBoundaryIZDrYHwuf2VJdpHw Content-Disposition: form-data; name="name"  "hello world" ------WebKitFormBoundaryIZDrYHwuf2VJdpHw Content-Disposition: form-data; name="file"; filename="temp.png" Content-Type: image/png  .PNG . ... IHDR... ..........Y../..,+|.$aIk.v...G?...P.P,,...m..e.2....v.7.	pHYs...%...%.IR$....|IDAT(.cTT....................:.?.......}.(.Pd`A..V...L...?..#.....4.o..LS.....W.d.?...A8..LS...(.u.......D.b......b.....o&..;..<.1......IEND.B`. ------WebKitFormBoundaryIZDrYHwuf2VJdpHw Content-Disposition: form-data; name="submit"  submit ------WebKitFormBoundaryIZDrYHwuf2VJdpHw--