Form表單的主要Content Type

2022-07-01 12:51:08 字數 3113 閱讀 8329

在spa單頁面橫行的時代,前後端互動基本都是json互動(也有通過formdata的,比如上傳檔案)。而在之前的jsp,php前後不分家的時候,前後互動好大一部分都是通過form表單來完成的。from標籤個屬性叫enctype

而content-type包含3個部分:

media-type: 資源或資料的 mime type (必填)

charset: 字元編碼標準

boundary: 對於多部分實體,boundary 是必需的,其包括來自一組字元的1到70個字元,已知通過電子郵件閘道器是非常健壯的,而不是以空白結尾。它用於封裝訊息的多個部分的邊界

key和value都會被編碼。空格被替換為『+』,保留字編碼對著參照 [rfc1738],非轉義字元被替換為『』%hh『』的格式(乙個%和兩個代表示ascii碼的16進製制數字),換行被替換為『%d0%0a』(對應cr lf),都可以通過encodeuri函式轉換,詳細還請查閱 mdn

key和value用『=』來分隔,每一對key和value用『&』來分隔

比如:

multipart/form-data 是用formdata來傳遞資料,和上邊的區別是,formdata用來傳遞大資料(非ascii字元和二進位制資料),具體請參考另一篇文章 

post使用form-data和x-www-form-urlencoded的本質區別 (這篇部落格講的感覺很詳細了),編碼規則如下:

包含乙個content-disposition欄位,值為form-data

乙個name屬行,值為對應表單key的name欄位

所有的mime傳輸一樣,用cr lf(『%0d%0a』)來分隔資料

比如:劃線處為規則3

接下我詳細說下multipart/form-data編碼,假設我們有以下form

<

form

action

=""enctype

="multipart/form-data"

method

="post"

>

<

p>

what is your name?

<

input

type

="text"

name

="submit-name"

><

br>

what files are you sending?

<

input

type

="file"

name

="files"

><

br>

<

input

type

="submit"

value

="send"

>

<

input

type

="reset"

>

form

>

content-type: multipart/form-data; boundary=aab03x

--aab03x

content-disposition: form-data; name="submit-name"

larry

--aab03x

content-disposition: form-data; name="files"; filename="file1.txt"

content-type: text/plain

... contents of file1.txt ...

--aab03x--

name=john

&age

=12 ,

那麼在multipart/form-data我們怎麼告訴伺服器呢,答案就是boundary,有了這個字段,伺服器就知道乙個value是從**開始和到**結束,這個字段開發者是不用寫的,瀏覽器會自動加上,網上說我們也可以自行設定,比如你可以設定你喜歡的字元,但是我沒有成功,每次都是隨機的給分配乙個,測試如下:)

回到剛才的form表單,如果使用者選擇了第二個檔案『file2.gif』,傳輸結構會是以下:

content-type: multipart/form-data; boundary=aab03x

--aab03x

content-disposition: form-data; name="submit-name"

larry

--aab03x

content-disposition: form-data; name="files"

content-type: multipart/mixed; boundary=bbc04y

--bbc04y

content-disposition: file; filename="file1.txt"

content-type: text/plain

... contents of file1.txt ...

--bbc04y

content-disposition: file; filename="file2.gif"

content-type: image/gif

content-transfer-encoding: binary

...contents of file2.gif...

--bbc04y--

--aab03x--

寬度 表單 Form表單

塊級元素和行內元素 1.塊級元素獨佔一行,行內元素在同一行顯示 2.塊級元素預設寬度為100 行內元素由內容撐開 3.塊級元素可以設定寬高,行內元素不可以設定寬高 4.塊級元素可以設定margin和padding和四個方向,行內元素只可以設定margin和padding和左右值,上下不起作用 5.塊...

關於表單(Form)

http協定基本的兩個請求方式為get與post,get請求方式為直接在請求的網址上傳送請求的相關資訊,例如 get login.jsp?user justin get請求方式由於是直接在網址上傳送請求的相關資訊,所以會在網址列上出現相關的請求資訊,例如 一些表頭 post資料本體 在設計表單的時候...

構件Form表單

1.html.beginform 該方法用於構建乙個from表單的開始,他的構造方法為 html.beginform actionname controllername formmethod.method 一般構建乙個表單結構如下 他將在客戶端產生乙個類似標籤 2.現在開始建立乙個表單例項,首先在i...