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