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

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

 在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屬性值

值	描述
application/x-www-form-urlencoded	在發送前編碼全部字符（默認）
multipart/form-data	不對字符編碼。 在使用包含文件上傳控件的表單時，必須使用該值。
text/plain	空格轉換爲 "+" 加號，但不對特殊字符編碼。

在《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(谷歌公司) 和 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 使用

一、form-data: 

http請求中的multipart/form-data,它會將表單的數據處理爲一條消息，以標籤爲單元，用分隔符分開。既能夠上傳鍵值對，也能夠上傳文件。當上傳的字段是文件時，會有Content-Type來表名文件類型；content-disposition，用來講明字段的一些信息；
因爲有boundary隔離，因此multipart/form-data既能夠上傳文件，也能夠上傳鍵值對，它採用了鍵值對的方式，因此能夠上傳多個文件。

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

 

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

 

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

三、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 }

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

 四、binary

至關於Content-Type:application/octet-stream，只能夠上傳二進制數據。

一般用來上傳文件，因爲沒有鍵值，因此，一次只能上傳一個文件。

 

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