form提交(图片，excel其他文件)

　　HTML表单需要设置

enctype="multipart/form-data"

这个属性，如果不这么设置，在提交表单时候，相关文件将无法获取。

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

　　　　（1）

application/x-www-form-urlencoded

在发送前编码所有字符（默认）（空格被编码为’+’，特殊字符被编码为ASCII十六进制字符）

　　　　（2）

multipart/form-data

 不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。

　　　　（3）

text/plain

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

　　默认

enctype=application/x-www-form-urlencoded

，所以表单的内容会按URL规则编码，然后根据表单的提交方法：

　　　　（1）method=’get’ 编码后的表单内容附加在请求连接后

　　　　（2）method=’post’ 编码后的表单内容作为post请求的正文内容

　　获取各种请求数据结果：

　　　　（1）条件：method='get'              enctype=application/x-www-form-urlencoded　

1 <form action="xxx" method="get">
2 <input type="text" name="name">
3 <input type="file" name="file"/>
4 <input type="submit" value="submit" name="submit">
5 </form>      

在输入框中输入"hello word" 并进行提交
1 GET /xxx?name=%22hello+world%22&file=temp.png&submit=submit HTTP/1.1
2 Host: hello.app
3 Connection: keep-alive
4 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
5 Upgrade-Insecure-Requests: 1
6 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
7 Referer: http://hello.app/formtest.html
8 Accept-Encoding: gzip, deflate, sdch
9 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中

　　　（2）条件：method='post'            enctype=application/x-www-form-urlencoded

1 <form action="xxx" method="
2 post">
3 <input type="text" name="name">
4 <input type="file" name="file"/>
5 <input type="submit" value="submit" name="submit">
6 </form>      

文本框中输入         "hello world"                ，选择文件，点击提交

1 POST /xxx HTTP/1.1
 2 Host: hello.app
 3 Connection: keep-alive
 4 Content-Length: 50
 5 Cache-Control: max-age=0
 6 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
 7 Origin: http://hello.app
 8 Upgrade-Insecure-Requests: 1
 9 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
10 Content-Type: application/x-www-form-urlencoded
11 Referer: http://hello.app/formtest.html
12 Accept-Encoding: gzip, deflate
13 Accept-Language: zh-CN,zh;q=0.8,en;q=0.6
14 
15 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'

提交的文件内容并没有被提交，只是把文件名编码到了正文中

　　　　（3）条件：method='get'　　enctype='multipart/form-data'　　 

1 <form action="xxx" method="
2 get" enctype="multipart/form-data">
3 <input type="text" name="name">
4 <input type="file" name="file"/>
5 <input type="submit" value="submit" name="submit">
6 </form>      

文本框中输入         "hello world"                ，选择文件，点击提交

1 GET /xxx?name=%22hello+world%22&file=temp.png&submit=submit HTTP/1.1
2 Host: hello.app
3 Connection: keep-alive
4 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
5 Upgrade-Insecure-Requests: 1
6 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
7 Referer: http://hello.app/formtest.html
8 Accept-Encoding: gzip, deflate, sdch
9 Accept-Language: zh-CN,zh;q=0.8,en;q=0.6

      

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

　　　　（4）method='post'   enctype=multipart/form-data

1 <form action="xxx" method="
2 post" enctype="multipart/form-data">
3 <input type="text" name="name">
4 <input type="file" name="file"/>
5 <input type="submit" value="submit" name="submit">
6 </form>      

文本框中输入         "hello world"                ，选择文件，点击提交

 1 POST /xxx HTTP/1.1
 2 Host: hello.app
 3 Connection: keep-alive
 4 Content-Length: 3695
 5 Cache-Control: max-age=0
 6 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
 7 Origin: http://hello.app
 8 Upgrade-Insecure-Requests: 1
 9 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
10 Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryIZDrYHwuf2VJdpHw
11 Referer: http://hello.app/formtest.html
12 Accept-Encoding: gzip, deflate
13 Accept-Language: zh-CN,zh;q=0.8,en;q=0.6
14 
15 ------WebKitFormBoundaryIZDrYHwuf2VJdpHw
16 Content-Disposition: form-data; name="name"
17 
18 "hello world"
19 ------WebKitFormBoundaryIZDrYHwuf2VJdpHw
20 Content-Disposition: form-data; name="file"; filename="temp.png"
21 Content-Type: image/png
22 
23 .PNG
24 .
25 ...
26 IHDR...
27 ..........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`.
28 ------WebKitFormBoundaryIZDrYHwuf2VJdpHw
29 Content-Disposition: form-data; name="submit"
30 
31 submit
32 ------WebKitFormBoundaryIZDrYHwuf2VJdpHw--      

　　

　　这次与前两次相比有很大的不同。请求主题的内容复杂很多。根据boundary定义的字符串，正文被分割为几个部分，每个部分与表单中的内容一一对应。每部分内容，还会由Content-Disposition: form-data;name="name"这样的字符串指定内容，与名字。对于文件内容，还有有额外的两个字段filename="temp.png"‘和Content-Type: image/png，并且文件的内容就直接附加在后面

　　所以，只有使用

enctype="multipart/form-data"

,表单才会把文件的内容编码到HTML请求中

　　参考：https://www.w3school.com.cn/tags/att_form_enctype.asp