JS form submission Time encoding type enctype detailed

Brief introduction

The Enctype property of a form is encoded in two common ways:application/x-www-form-urlencoded and multipart/form-data, which default to Application/x-www-form-urlencoded.

When action is get , the browser uses x-www-form-urlencoded encoding to convert the form data into a string (Name1=value1&name2=value2 ... ), and then append the string to the URL, using the. Split, to load the new URL.

When the action is post, the browser encapsulates the form data into the HTTP body and then sends it to the server. If you don't have a type=file control, you can use the default application/x-www-form-urlencoded. But if you have type=file, you will need to use Multipart/form-data. The browser splits the entire form into units of controls and adds Content-disposition (form-data or file) to each section, Content-type (default = Text/plain), name (control name), and so on. and add the separator (boundary).

Based on the information found, the following summary is given:

• application/x-www-form-urlencoded: The form data is encoded as a name/value pair . This is the standard encoding format.
• multipart/form-data: The form data is encoded as a message, and each control on the page corresponds to a part of the message.
• Text/plain: Form data is encoded in plain text with no control or formatting characters.

What determines the encoding of the form?

A small partner who is familiar with the table element <form> , enctype is certainly not unfamiliar with the attributes, that is, it specifies the type of content that the form data encodes when the form is submitted to the server.

Form encoding Type

Knowing the form encoding is enctype determined, then how many optional values does it have? Is it possible to use all MIME types?
In fact, as described in the HTML5 specification, there are enctype three options, the last text/plain of which is new compared to 4.01.

• application/x-www-form-urlencoded
• Multipart/form-data
• Text/plain

application/x-www-form-urlencoded

This is the default encoding type , which, when used, converts non-alphanumeric characters in the form data to escape characters, such as "%hh", which are then combined into this form, so that the key1=value1&key2=value2 backend is decoded after fetching the data.

Note: If there are files in the form, only the file name is left.

Multipart/form-data

This type is used to efficiently transfer files, non-ASCII data, and binary data , dividing the form data into different parts and splitting each part with the specified delimiter. Each part has a Content-Disposition header that specifies the key name and some other information for the form item, and each part has an optional Content-Type , unspecified designation text/plain . Here multipart/form-data is an example of using a coded type:

Request Headers:

Accept:application/json, Text/plain, */*Accept-encoding:gzip, deflateaccept-language:zh-cn,zh;q= 0.8connection:keep-alivecontent-length:13125content-type:multipart/form-data; boundary=----Webkitformboundaryaqwxpqycfmbahgphcookie:shiro.sesssion=1a6d4f4d-ab5f-4a1b-a5cd-fc71cf9633cbhost : 192.168.199.223origin:http://192.168.199.223referer:http://192.168.199.223/user-agent:mozilla/5.0 (Windows NT 6.1; WOW64) applewebkit/537.36 (khtml, like Gecko) chrome/51.0.2704.106 safari/537.36

Request Payload:

------webkitformboundaryaqwxpqycfmbahgphcontent-disposition:form-data; Name= "Fileenterprise"; Filename= "a.jpg"Content-type:image/jpeg------webkitformboundaryaqwxpqycfmbahgphcontent- Disposition:form-data; Name= "Enterprisename" Limited Liability company ------webkitformboundaryaqwxpqycfmbahgphcontent-disposition: Form-data; Name= "Unifiedsocialcreditcode"91530700781667237G------webkitformboundaryaqwxpqycfmbahgph--

Attention:

• In general, method and enctype is two different properties, but in the file method must be specified as POST , otherwise the file only left filename;

• When the file is not passed, it enctype will be changed back to the default application/x-www-form-urlencoded .

Text/plain

Arranges form data by key-value pairs key1=value1\r\nkey2=value2 without escaping.

Note: If there are files in the form, only the file name is left.

Application/json and other MIME types

In addition, it is necessary to explain the form data encoding type application/json , has been abandoned (see HTML JSON form submission), it is recommended not to <form enctype="..."> use in, that is used if the browser does not support, will be replaced application/x-www-form-urlencoded .
Similarly, the remaining MIME types, which are not supported, are replaced by the default encoding application/x-www-form-urlencoded .

Note: 1. MIME (multipurpose Internet mail Extensions) is an Internet standard that describes the message content type.

2.MIME messages can contain text, images, audio, video, and other application-specific data.

For a detailed list of MIME types, please refer to the W3school:mime reference manual

Summarize

Therefore, enctype can be considered as the form of data content type(MIME type) , but its value can not be used in addition to the above mentioned three, otherwise it will be converted to the default encoding.

JS form submission Time encoding type enctype detailed