Form The main form Content-Type

　　In an era of rampant Spa single-page, front and rear end are basically interactive Json interaction (also by FormData, such as uploading files). In previous Jsp, Php, regardless of family time before and after, before and after a big part of interaction are done through Form form. From a property called label enctype，这属性指定了Form的Content-Type，可取的只有application/x-www-form-urlencoded， multipart/form-data， text/plain。


　　Content-Type and comprising three parts:

1. 　　media-type: resource or data  MIME of the type  (required)
2. 　　charset: the character encoding standard
3. 　　boundary: For multipart entity, boundary is required, which comprises from 1 to 70 characters from a set of characters, known to be very robust through email gateways, rather than the end of the blank. It is the boundary for enclosing a plurality of portions of message

　　application / x-www-form-urlencoded Form is the default Content-Type: when the form is submitted code must follow the following criteria:

1. 　　key and value will be encoded. Spaces are replaced with '+', facing the reserved word coded reference  [in RFC1738] , is replaced with a non-escape character ''% hh '' format (one percent and substituting two hexadecimal digits represent ASCII code), newline is replaced with '% D0% 0A' (corresponding to the CR LF), can be converted by encodeURI function, further details please refer mdn
2. 　　and a key value '=' to separate, with each pair of key and value '&' separated

　　such as:

 

　　multipart / form-data is used to pass data FormData, and upper difference is, FormData used to transfer large data (binary data and non-ascii character), Refer to another article  post using form-data and x-www- the essential difference between form-urlencoded  (this blog talking about feeling great detail), the encoding rules are as follows:

1. 　　Content-Disposition field contains a value of form-data
2.         A name attribute row, the value corresponding to the key name field form
3.         Like all Mime transmission, with CR LF ( '% 0D% 0A') to separate data

　　For example: Crossed rule 3

 

　　I took detail under multipart / form-data encoding, suppose we have the following Form

<FORM action="http://server.com/cgi/handle"
       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>

　　当用户输入‘Larry’在文本input中，还选择了一个文本文件‘file1.txt’，然后点击提交按钮，传向后台的body体为：

　　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--

　　我们看到蓝色部分，就是Content-Type，参考上上边提到的，少了charset，多了个boundary（我们知道，在application/x-www-form-urlencoded 中是用‘&’来告诉服务器每一个key和value，比如一个get请求: http://localhost:8080/api?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--