C# HTTP系列10 form表單的enctype屬性

系列目錄???? 【已更新最新開(kāi)發(fā)文章，點(diǎn)擊查看詳細(xì)】
<https://www.cnblogs.com/SavionZhang/p/11422481.html>
?在ASP.NET編程中經(jīng)常遇到下面的代碼片段，將人員信息以表單方式提交到后臺(tái)程序并保存到服務(wù)器與數(shù)據(jù)庫(kù)中。
1 <form action="userManage.ashx" method="post" enctype
="application/x-www-form-urlencoded"> 2 名稱(chēng)： <input type="text" name="uname"
class="uname" /><br /> 3 郵件： <input type="text" name="email" class="email" /><br
/> 4 <input type="submit" name="submit" value="提交"/> 5 </form>
enctype 屬性規(guī)定在發(fā)送到服務(wù)器之前應(yīng)該如何對(duì)表單數(shù)據(jù)進(jìn)行編碼。

默認(rèn)地，表單數(shù)據(jù)會(huì)編碼為
"application/x-www-form-urlencoded"。就是說(shuō)，在發(fā)送到服務(wù)器之前，所有字符都會(huì)進(jìn)行編碼（空格轉(zhuǎn)換為 "+"
加號(hào)，特殊符號(hào)轉(zhuǎn)換為 ASCII HEX 值）。

enctype屬性值

值描述
application/x-www-form-urlencoded 在發(fā)送前編碼所有字符（默認(rèn)）
multipart/form-data
不對(duì)字符編碼。

在使用包含文件上傳控件的表單時(shí)，必須使用該值。

text/plain 空格轉(zhuǎn)換為 "+" 加號(hào)，但不對(duì)特殊字符編碼。
在《C# HTTP系列8 GET與POST對(duì)比說(shuō)明 <https://www.cnblogs.com/SavionZhang/p/11396403.html>
》中介紹了HTTP的常用方法，包含OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE、CONNECT 這幾種。其中 POST
一般用來(lái)向服務(wù)端提交數(shù)據(jù)。更詳細(xì)的內(nèi)容請(qǐng)參考：HTTP1.1協(xié)議 <https://www.ietf.org/rfc/rfc2616.txt>。

HTTP 協(xié)議是以?ASCII 碼?傳輸，建立在 TCP/IP 協(xié)議之上的應(yīng)用層規(guī)范。規(guī)范把 HTTP
請(qǐng)求分為三個(gè)部分：狀態(tài)行、請(qǐng)求頭、消息主體。類(lèi)似于下面這樣：
BASH<method> <request-URL> <version> <headers> <entity-body>
協(xié)議規(guī)定 POST 提交的數(shù)據(jù)必須放在消息主體（entity-body）中，但協(xié)議并沒(méi)有規(guī)定數(shù)據(jù)必須?使用什么編碼方式
。實(shí)際上，開(kāi)發(fā)者完全可以自己決定消息主體的格式，只要最后發(fā)送的 HTTP 請(qǐng)求滿(mǎn)足上面的格式就可以。
但是，數(shù)據(jù)發(fā)送出去，還要服務(wù)端解析成功才有意義。一般服務(wù)端語(yǔ)言如.NET、JAVA、PHP、Python 等，以及它們的
framework，都內(nèi)置了自動(dòng)解析常見(jiàn)數(shù)據(jù)格式的功能。

服務(wù)端通常是根據(jù)請(qǐng)求頭（headers）中的?Content-Type?字段來(lái)獲知請(qǐng)求中的消息主體是用何種方式編碼，再對(duì)主體進(jìn)行解析。
所以說(shuō)到 POST 提交數(shù)據(jù)方案，包含了 Content-Type 和消息主體編碼方式兩部分。
enctype 之 application/x-www-form-urlencoded 這是網(wǎng)頁(yè)中最常見(jiàn)的 POST 提交數(shù)據(jù)的方式。瀏覽器的原生
<form> 表單，如果不設(shè)置?enctype?屬性，那么最終就會(huì)以 application/x-www-form-urlencoded 方式提交數(shù)據(jù)。 1 <
formid="form1" runat="server" action="UserManageHandler.ashx" method="post"
enctype="application/x-www-form-urlencoded"> 2 <div> 3 名稱(chēng)： <input type="text"
name="uname" class="uname" /><br /> 4 郵件： <input type="text" name="email" class
="email" /><br /> 5 <input type="submit" name="submit" value="提交" /> 6 </div> 7
</form>
此點(diǎn)擊【提交】按鈕，F(xiàn)orm提交請(qǐng)求數(shù)據(jù)，F(xiàn)iddler抓包時(shí)看到的請(qǐng)求如下（無(wú)關(guān)的請(qǐng)求頭在本文中都省略掉了）：



首先，Content-Type 被指定為 application/x-www-form-urlencoded；
其次，提交的數(shù)據(jù)按照 key1=val1&key2=val2 的方式進(jìn)行編碼，key 和 val 都進(jìn)行了 URL 轉(zhuǎn)碼。
大部分服務(wù)端語(yǔ)言都對(duì)這種方式有很好的支持。例如 .NET
中，context.Request["uname"]可以獲取到名稱(chēng)的值，context.Request["email"]可以得到郵件的值。

很多時(shí)候，用 Ajax 提交數(shù)據(jù)時(shí)，也是使用這種方式。
例如 JQuery(谷歌公司) 和 QWrap(百度公司) 的 Ajax，Content-Type
默認(rèn)值都是「application/x-www-form-urlencoded;charset=utf-8」。
enctype 之 multipart/form-data 如果表單中需要上傳附件，則enctype屬性需要修改為multipart/form-data。 <
formid="form1" runat="server" action="UserManageHandler.ashx" method="post"
enctype="multipart/form-data"> <div> 名稱(chēng)： <input type="text" name="uname" class
="uname" /><br/> 郵件： <input type="text" name="email" class="email" /><p/> 附件1： <
inputtype="file" name="file1" class="file" /><p/> 附件2： <input type="file" name
="file2" class="file" /><p/> 附件3： <input type="file" name="file3" class="file"
/><p/> <input type="submit" name="submit" value="提交" /> </div> </form>
* application/x-www-form-urlencoded 不能用于上傳文件，只能提交文本，當(dāng)然如果有file控件的話(huà)也只能提交文件名。
* multipart/form-data 用于上傳文件以及文本。 ?方式一：只上傳一個(gè)附件，.txt普通文本類(lèi)型
此點(diǎn)擊【提交】按鈕，F(xiàn)orm提交請(qǐng)求數(shù)據(jù)，F(xiàn)iddler抓包時(shí)看到的請(qǐng)求如下（無(wú)關(guān)的請(qǐng)求頭在本文中都省略掉了）：






方式二：上傳多個(gè)附件，一個(gè)普通文本，一個(gè)Office word文檔，一個(gè)png圖片



此點(diǎn)擊【提交】按鈕，F(xiàn)orm提交請(qǐng)求數(shù)據(jù)，F(xiàn)iddler抓包時(shí)看到的請(qǐng)求如下（無(wú)關(guān)的請(qǐng)求頭在本文中都省略掉了）：



（1）boundary：用于分割不同的字段，為了避免與正文內(nèi)容重復(fù)。以2個(gè)橫線(xiàn)“--”開(kāi)頭，最后的字段之后以2個(gè)橫線(xiàn)“--”結(jié)束。

（2）Content-Type： 指明了數(shù)據(jù)是以 multipart/form-data 來(lái)編碼。

（3）消息主體里按照字段個(gè)數(shù)又分為多個(gè)結(jié)構(gòu)類(lèi)似的部分，每部分都是以?--boundary
?開(kāi)始，緊接著是內(nèi)容描述信息，然后是回車(chē)，最后是字段具體內(nèi)容（文本或二進(jìn)制）。如果傳輸?shù)氖俏募€要包含文件名和文件類(lèi)型信息。消息主體最后以?
--boundary--?標(biāo)示結(jié)束。

關(guān)于 multipart/form-data 的詳細(xì)定義，請(qǐng)查看 rfc1867
<https://www.ietf.org/rfc/rfc1867.txt>

這種方式一般用來(lái)上傳文件，各大服務(wù)端語(yǔ)言對(duì)它也有著良好的支持。

上面提到的這兩種 POST 數(shù)據(jù)的方式，都是瀏覽器原生支持的，而且現(xiàn)階段標(biāo)準(zhǔn)中原生 <form> 表單也只支持這兩種方式
<http://www.w3.org/TR/html401/interact/forms.html#h-17.13.4>（通過(guò) <form> 元素的?
enctype?屬性指定，默認(rèn)為?application/x-www-form-urlencoded。）。

隨著越來(lái)越多的 Web 站點(diǎn)，尤其是 WebApp，全部使用 Ajax 進(jìn)行數(shù)據(jù)交互之后，我們完全可以定義新的數(shù)據(jù)提交方式，給開(kāi)發(fā)帶來(lái)更多便利。
enctype 之 text/plain enctype?還支持?text/plain，不過(guò)用得非常少。 <form action
="userManage.ashx" method="post" enctype="text/plain"> 名稱(chēng)： <input type="text"
name="uname" class="uname" /><br /> 郵件： <input type="text" name="email" class
="email" /><br /> <input type="submit" name="submit" value="提交"/> </form>
此點(diǎn)擊【提交】按鈕，F(xiàn)orm提交請(qǐng)求數(shù)據(jù)，F(xiàn)iddler抓包時(shí)看到的請(qǐng)求如下（無(wú)關(guān)的請(qǐng)求頭在本文中都省略掉了）：



application/json


application/json 這個(gè) Content-Type
作為響應(yīng)頭大家肯定不陌生。實(shí)際上，現(xiàn)在越來(lái)越多的人把它作為請(qǐng)求頭，用來(lái)告訴服務(wù)端消息主體是序列化后的 JSON 字符串。由于 JSON 規(guī)范的流行，除了低版本
IE 之外的各大瀏覽器都原生支持 JSON.stringify，服務(wù)端語(yǔ)言也都有處理 JSON 的函數(shù)，使用 JSON 不會(huì)遇到什么問(wèn)題。
postman 使用
1、form-data:?

http請(qǐng)求中的multipart/form-data,它會(huì)將表單的數(shù)據(jù)處理為一條消息，以標(biāo)簽為單元，用分隔符分開(kāi)。既可以上傳鍵值對(duì)，也可以上傳文件。當(dāng)上傳的字段是文件時(shí)，會(huì)有Content-Type來(lái)表名文件類(lèi)型；content-disposition，用來(lái)說(shuō)明字段的一些信息；
由于有boundary隔離，所以multipart/form-data既可以上傳文件，也可以上傳鍵值對(duì)，它采用了鍵值對(duì)的方式，所以可以上傳多個(gè)文件。


?點(diǎn)擊【Code】按鈕，打開(kāi)如下窗體



?

2、x-www-form-urlencoded：
就是application/x-www-from-urlencoded,會(huì)將表單內(nèi)的數(shù)據(jù)轉(zhuǎn)換為鍵值對(duì)

?

點(diǎn)擊【Code】按鈕，打開(kāi)如下窗體



3、raw
可以上傳任意格式的文本，可以上傳text、json、xml、html等



?后臺(tái)代碼如下：
1 public void ProcessRequest(HttpContext context) 2 { 3
context.Response.ContentType ="application/json"; //"text/plain"; 4 5 string
uname = context.Request["uname"]; 6 string email = context.Request["email"]; 7
8 StringBuilder sbFiles = new StringBuilder(); 9 HttpFileCollection
filesCollection = context.Request.Files; 10 11 if (filesCollection != null &&
filesCollection.Count >0) 12 { 13 for (var i = 0; i < filesCollection.Count;
i++) 14 { 15 HttpPostedFile postedFile = filesCollection[i]; 16 if (!string
.IsNullOrWhiteSpace(postedFile.FileName))17 { 18 sbFiles.AppendLine(); 19
sbFiles.AppendLine("附件" + (i + 1)); 20 sbFiles.AppendLine("文件名稱(chēng)：" +
postedFile.FileName);21 sbFiles.AppendLine("文件大小(字節(jié))：" +
postedFile.ContentLength);22 sbFiles.AppendLine("客戶(hù)端發(fā)送的文件的 MIME 內(nèi)容類(lèi)型：" +
postedFile.ContentType);23 } 24 } 25 } 26 27 context.Response.Write("提交結(jié)果如下："
+ Environment.NewLine +28 "名稱(chēng)：" + uname + Environment.NewLine + 29 "郵箱：" +
email + Environment.NewLine +30 sbFiles 31 ); 32 }
點(diǎn)擊【提交】按鈕，返回如下結(jié)果：



?4、binary

相當(dāng)于Content-Type:application/octet-stream，只可以上傳二進(jìn)制數(shù)據(jù)。

通常用來(lái)上傳文件，由于沒(méi)有鍵值，所以，一次只能上傳一個(gè)文件。



?
系列目錄???? 【已更新最新開(kāi)發(fā)文章，點(diǎn)擊查看詳細(xì)】
<https://www.cnblogs.com/SavionZhang/p/11422481.html>

• ? 上一篇： K8S從懵圈到熟練 – 集群網(wǎng)絡(luò)詳解
• ? 下一篇： 實(shí)時(shí)計(jì)算Flink on Kubernetes產(chǎn)品模式介紹