1. 程式人生 > >http表單上傳方式-GET\POST

http表單上傳方式-GET\POST

在Web開發中,我們使用的比較多的HTTP請求方式基本上就是GET、POST。

一、http請求常見的表單檔案上傳形式

     首先了解下application/x-www-form-urlencoded和multipart/form-data的區別:

  • application/x-www-form-urlencoded:是常用的表單發包方式,普通的表單提交,或者js發包,預設都是通過這種方式。
<form enctype="application/x-www-form-urlencoded" action="http://" method="POST">
    <input type=
"text" name="name" value="homeway"> <input type="text" name="key" value="nokey"> <input type="submit" value="submit"> </form>

      當method為get時候,瀏覽器用x-www-form-urlencoded的編碼方式把form資料轉換成一個字串(name1=value1&name2=value2…),然後把這個字串append到url後面,用?分割,載入這個新的url。
      當method為post時候

,瀏覽器把form資料封裝到http body中,然後傳送到server(伺服器)。

  • multipart/form-data
    如果沒有 type=file 的控制元件,form表單會自動form的enctype屬性為編碼方式預設的 application/x-www-form-urlencoded
    如果有 type=file 的話,就要用到 multipart/form-data 了。瀏覽器會把整個表單以控制元件為單位分割,併為每個部分加上Content-Disposition(form-data或者file)、Content-Type(預設為text/plain)、name(控制元件name)等資訊,並加上分割符(boundary)。

二、更加詳細的Form表單請求

   Form表單請求,一般常用的是Get和Post提交方式,

  • Get方式提交
    表單內容
<form action="user/login.do" method="get" >  
    使用者名稱:<input type="text" name="username"><br>  
    密碼:<input type="text" name="password"><br>  
    <input type="submit" value="登入"/>  
</form> 
  • Post方式提交

   Post提交方式,Form表單有兩種enctype型別:

   1、enctype=”application/x-www-form-urlencoded”

   也是預設的提交型別,一般針對文字請求引數,不含附件。比如

<form action="user/login.do" method="post" >  
    使用者名稱:<input type="text" name="username"><br>  
    密碼:<input type="text" name="password"><br>  
    <input type="submit" value="登入"/>  
</form> 

   提交表單時的Http請求如下:

POST http://localhost:8080/springmvc/user/login.do HTTP/1.1  
Host: localhost:8080  
Connection: keep-alive  
Content-Length: 33  
Cache-Control: max-age=0  
Origin: http://localhost:8080  
Upgrade-Insecure-Requests: 1  
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36  
Content-Type: application/x-www-form-urlencoded  
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8  
Referer: http://localhost:8080/springmvc/  
Accept-Encoding: gzip, deflate  
Accept-Language: zh-CN,zh;q=0.8  

username=xiaoming&password=123456789  

   訊息頭中的Content-Type: application/x-www-form-urlencoded
   訊息體中內容以key=value的形式拼接
username=xiaoming&password=123456789
   2、enctype=”multipart/form-data”

   需要上傳附件時,必須為”multipart/form-data”。**,比如

<form action="user/login.do" method="post" enctype="multipart/form-data">  
    使用者名稱:<input type="text" name="username"><br>  
    密碼:<input type="text" name="password"><br>  
    上傳檔案:<input type="file" name="uploadFile"/><br>  
    <input type="submit" value="登入"/>  
</form> 

   提交表單時,Http請求協議如下:

POST http://localhost:8080/springmvc/user/login.do HTTP/1.1  
Host: localhost:8080  
Connection: keep-alive  
Content-Length: 400  
Cache-Control: max-age=0  
Origin: http://localhost:8080  
Upgrade-Insecure-Requests: 1  
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36  
Content-Type: multipart/form-data; boundary=----WebKitFormBoundarykALcKBgBaI9xA79y  
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8  
Referer: http://localhost:8080/springmvc/  
Accept-Encoding: gzip, deflate  
Accept-Language: zh-CN,zh;q=0.8  

------WebKitFormBoundarykALcKBgBaI9xA79y  
Content-Disposition: form-data; name="username"  

xiaoming 
------WebKitFormBoundarykALcKBgBaI9xA79y  
Content-Disposition: form-data; name="password"  

123456789  
------WebKitFormBoundarykALcKBgBaI9xA79y  
Content-Disposition: form-data; name="uploadFile"; filename="file.txt"  
Content-Type: text/plain  

檔案中的內容       
------WebKitFormBoundarykALcKBgBaI9xA79y--  

   請求訊息頭中, Content-Type: multipart/form-data; boundary=- - - -WebKitFormBoundarykALcKBgBaI9xA79y
boundary為分隔符.
   訊息體中的每個引數都會以“- -”+boundary 隔開,最後一個分隔符末尾需要加”- -“,即”- -“+boundary+”- -“