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

• 2019 年 10 月 5 日
• 筆記

系列目錄 【已更新最新開發文章，點擊查看詳細】

在ASP.NET編程中經常遇到下面的程式碼片段，將人員資訊以表單方式提交到後台程式並保存到伺服器與資料庫中。

1 <form action="userManage.ashx" method="post" enctype="application/x-www-form-urlencoded">  2  名稱： <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 屬性規定在發送到伺服器之前應該如何對錶單數據進行編碼。

默認地，表單數據會編碼為 "application/x-www-form-urlencoded"。就是說，在發送到伺服器之前，所有字元都會進行編碼（空格轉換為 "+" 加號，特殊符號轉換為 ASCII HEX 值）。

enctype屬性值

在《C# HTTP系列8 GET與POST對比說明》中介紹了HTTP的常用方法，包含OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE、CONNECT 這幾種。其中 POST 一般用來向服務端提交數據。更詳細的內容請參考：HTTP1.1協議。

HTTP 協議是以 ASCII 碼 傳輸，建立在 TCP/IP 協議之上的應用層規範。規範把 HTTP 請求分為三個部分：狀態行、請求頭、消息主體。類似於下面這樣：

BASH<method> <request-URL> <version>  <headers>    <entity-body>

協議規定 POST 提交的數據必須放在消息主體（entity-body）中，但協議並沒有規定數據必須 使用什麼編碼方式。實際上，開發者完全可以自己決定消息主體的格式，只要最後發送的 HTTP 請求滿足上面的格式就可以。但是，數據發送出去，還要服務端解析成功才有意義。一般服務端語言如.NET、JAVA、PHP、Python 等，以及它們的 framework，都內置了自動解析常見數據格式的功能。

服務端通常是根據請求頭（headers）中的 Content-Type 欄位來獲知請求中的消息主體是用何種方式編碼，再對主體進行解析。 所以說到 POST 提交數據方案，包含了 Content-Type 和消息主體編碼方式兩部分。

enctype 之 application/x-www-form-urlencoded

這是網頁中最常見的 POST 提交數據的方式。瀏覽器的原生 <form> 表單，如果不設置 enctype 屬性，那麼最終就會以 application/x-www-form-urlencoded 方式提交數據。

1 <form id="form1" runat="server" action="UserManageHandler.ashx" method="post" enctype="application/x-www-form-urlencoded">  2  <div>  3       名稱： <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>

此點擊【提交】按鈕，Form提交請求數據，Fiddler抓包時看到的請求如下（無關的請求頭在本文中都省略掉了）：

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

很多時候，用 Ajax 提交數據時，也是使用這種方式。 例如 JQuery(Google公司) 和 QWrap(百度公司) 的 Ajax，Content-Type 默認值都是「application/x-www-form-urlencoded;charset=utf-8」。

enctype 之 multipart/form-data

如果表單中需要上傳附件，則enctype屬性需要修改為multipart/form-data。

<form id="form1" runat="server" action="UserManageHandler.ashx" method="post" enctype="multipart/form-data">      <div>              名稱：  <input type="text" name="uname"   class="uname" /><br/>              郵件：  <input type="text" name="email"   class="email" /><p/>              附件1： <input type="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 不能用於上傳文件，只能提交文本，當然如果有file控制項的話也只能提交文件名。
• multipart/form-data 用於上傳文件以及文本。

方式一：只上傳一個附件，.txt普通文本類型

此點擊【提交】按鈕，Form提交請求數據，Fiddler抓包時看到的請求如下（無關的請求頭在本文中都省略掉了）：

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

此點擊【提交】按鈕，Form提交請求數據，Fiddler抓包時看到的請求如下（無關的請求頭在本文中都省略掉了）：

（1）boundary：用於分割不同的欄位，為了避免與正文內容重複。以2個橫線「–」開頭，最後的欄位之後以2個橫線「–」結束。

（2）Content-Type： 指明了數據是以 multipart/form-data 來編碼。

（3）消息主體里按照欄位個數又分為多個結構類似的部分，每部分都是以 --boundary 開始，緊接著是內容描述資訊，然後是回車，最後是欄位具體內容（文本或二進位）。如果傳輸的是文件，還要包含文件名和文件類型資訊。消息主體最後以 --boundary-- 標示結束。

關於 multipart/form-data 的詳細定義，請查看 rfc1867

這種方式一般用來上傳文件，各大服務端語言對它也有著良好的支援。

上面提到的這兩種 POST 數據的方式，都是瀏覽器原生支援的，而且現階段標準中原生 <form> 表單也只支援這兩種方式（通過 <form> 元素的 enctype 屬性指定，默認為 application/x-www-form-urlencoded。）。

隨著越來越多的 Web 站點，尤其是 WebApp，全部使用 Ajax 進行數據交互之後，我們完全可以定義新的數據提交方式，給開發帶來更多便利。

enctype 之 text/plain

enctype 還支援 text/plain，不過用得非常少。

<form action="userManage.ashx" method="post" enctype="text/plain">    名稱： <input type="text" name="uname" class="uname" /><br />    郵件： <input type="text" name="email" class="email" /><br />          <input type="submit" name="submit" value="提交"/>   </form>

此點擊【提交】按鈕，Form提交請求數據，Fiddler抓包時看到的請求如下（無關的請求頭在本文中都省略掉了）：

application/json

application/json 這個 Content-Type 作為響應頭大家肯定不陌生。實際上，現在越來越多的人把它作為請求頭，用來告訴服務端消息主體是序列化後的 JSON 字元串。由於 JSON 規範的流行，除了低版本 IE 之外的各大瀏覽器都原生支援 JSON.stringify，服務端語言也都有處理 JSON 的函數，使用 JSON 不會遇到什麼問題。

postman 使用

1、form-data:

http請求中的multipart/form-data,它會將表單的數據處理為一條消息，以標籤為單元，用分隔符分開。既可以上傳鍵值對，也可以上傳文件。當上傳的欄位是文件時，會有Content-Type來表名文件類型；content-disposition，用來說明欄位的一些資訊； 由於有boundary隔離，所以multipart/form-data既可以上傳文件，也可以上傳鍵值對，它採用了鍵值對的方式，所以可以上傳多個文件。

點擊【Code】按鈕，打開如下窗體

2、x-www-form-urlencoded： 就是application/x-www-from-urlencoded,會將表單內的數據轉換為鍵值對

點擊【Code】按鈕，打開如下窗體

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

後台程式碼如下：

 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("文件名稱：" + postedFile.FileName);  21                 sbFiles.AppendLine("文件大小(位元組)：" + postedFile.ContentLength);  22                 sbFiles.AppendLine("客戶端發送的文件的 MIME 內容類型：" + postedFile.ContentType);  23             }  24         }  25     }  26  27     context.Response.Write("提交結果如下：" + Environment.NewLine +  28                              "名稱：" + uname + Environment.NewLine +  29                              "郵箱：" + email + Environment.NewLine +  30                              sbFiles  31                           );  32 }

點擊【提交】按鈕，返回如下結果：

4、binary

相當於Content-Type:application/octet-stream，只可以上傳二進位數據。

通常用來上傳文件，由於沒有鍵值，所以，一次只能上傳一個文件。

系列目錄 【已更新最新開發文章，點擊查看詳細】