HTML Form Enctype
Http://www.w3.org/TR/html401/interact/forms.html#h-17.13.1%E2%80%8D
- enctype=
Content-type [CI]
This
-
attribute specifies the content type used to submit the form to the server if the value of is method "p OST "). The default value for this attribute is "application/x-www-form-urlencoded". The value "Multipart/form-data" should is used in combination with the INPUT element, type = "file".
Enctype if not written, the default is application/x-www-form-urlencoded, and if the commit contains a file INPUT element, the type should be multipart/form-data .
What does enctype mean?
and see the following description, the browser processes the form of the third step, the form data collection encoding, encoding is the Content-type value specified by Enctype. The encoding format is part of the HTTP protocol that both the client and server follow.
Step three:encode The form data set
The form data set is then encoded according to the content type specified by the enctype attribute of the FORM element.
But is enctype in either of these types?
Looking at the specification description, only the UA is required to support these two types, and the other Content-type types are not defined.
17.13.4 form Content types
The enctype attribute of the form element specifies the content type used to encode the form data set for submission to the server. User agents must support the content types listed below. Behavior for other content types is unspecified.
...
application/x-www-form-urlencoded
This is the default content type. Forms submitted with this content type must is encoded as follows:
....
multipart/form-data
...
enctype Usage Test
First, the enctype only takes effect when the Post method is used, and the Get method uses the Application/x-www-form-urlencoded encoding method by default.
- If method The IS "get" and the is an action HTTP URI, the user agent takes the value action of, appends a to `?‘ it, then app Ends the form data set, encoded using the "application/x-www-form-urlencoded" content type. The user agent then traverses the link to this URI. In this scenario, form data is restricted to ASCII codes.
- If method The IS "post" and the action was an HTTP URI, the user agent conducts an HTTP "post" transaction using the value of The action attribute and a message created according to the content type specified by the enctype attribute.
Constructs a form containing the file control, and also includes an input box, which changes enctype to the following values, and the view request messages are encoded according to application/x-www-form-urlencoded:
1, do not write Enctype properties
<form id= "FileUpload" name= "FileUpload" method= "post" action= "/index.php" >
2, write Enctype but the value is empty:
<form id= "FileUpload" name= "FileUpload" method= "post" action= "/index.php" enctype= "" >
3, writing enctype value is undefined value:
<form id= "FileUpload" name= "FileUpload" method= "post" action= "/index.php" enctype= "SSS" >
4, writing enctype for
<form id= "FileUpload" name= "FileUpload" method= "post" action= "/index.php" enctype= "application/ X-www-form-urlencoded ">
Code:
<HTML><Head> <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /> <Scriptsrc= "./jquery.js"></Script> <Linkrel= "stylesheet"href= "./test.css" /></Head><Body> <style> </style> <formID= "FileUpload"name= "FileUpload"Method= "POST"Action= "/index.php"enctype= "SSS"> <inputtype= "File"name= "Testfile"></BR> <inputtype= "text"name= "TextInput"value= "Textinputvalue"></BR> <inputtype= "Submit"value= "Upload"></BR> </form> <Script> </Script></Body></HTML>
Grab Bag:
POST http://wwwtestcom/index.php http/1.1
Host:wwwtestcom
user-agent:mozilla/5.0 (Windows NT 6.1; rv:32.0) gecko/20100101 firefox/32.0
accept:text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
accept-language:zh-cn,zh;q=0.8,en-us;q=0.5,en;q=0.3
Accept-encoding:gzip, deflate
dnt:0
referer:http://wwwtestcom/fileupload.php
Connection:keep-alive
content-type:application/x-www-form-urlencoded
content-length:56
Testfile=%e5%91%a8%e6%8a%a5.txt&textinput=textinputvalue
Modify Enctype to Multipart/form-data
<form id= "FileUpload" name= "FileUpload" method= "post" action= "/index.php" enctype= "Multipart/form-data" >
Grab Bag:
POST http://wwwtestcom/index.php http/1.1
Host:wwwtestcom
user-agent:mozilla/5.0 (Windows NT 6.1; rv:32.0) gecko/20100101 firefox/32.0
accept:text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
accept-language:zh-cn,zh;q=0.8,en-us;q=0.5,en;q=0.3
Accept-encoding:gzip, deflate
dnt:0
referer:http://wwwtestcom/fileupload.php
Connection:keep-alive
Content-type:multipart/form-data; boundary=---------------------------734115918637
content-length:299
-----------------------------734115918637
Content-disposition:form-data; Name= "Testfile"; Filename= "Test.txt"
Content-type:text/plain
-----------------------------734115918637
Content-disposition:form-data; Name= "TextInput"
Textinputvalue
-----------------------------734115918637--
Also, demonstrate that the following file control can select multiple files:
Code:
<HTML><Head> <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /> <Scriptsrc= "./jquery.js"></Script> <Linkrel= "stylesheet"href= "./test.css" /></Head><Body> <style> </style> <formID= "FileUpload"name= "FileUpload"Method= "POST"Action= "/index.php"enctype= "Multipart/form-data"> <inputtype= "File"name= "Testfile"multiple= "multiple"></BR> <inputtype= "text"name= "TextInput"value= "Textinputvalue"></BR> <inputtype= "Submit"value= "Upload"></BR> </form> <Script> </Script></Body></HTML>
Select two files, grab the bag--you can see the newspaper style, there are two testfile part, each of which corresponds to a file:
POST http://wwwtestcom/index.php http/1.1
host:wwwtestcom
user-agent:mozilla/5.0 (Windows NT 6.1; rv:32.0) gecko/20100101 firefox/32.0
accept:text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
accept-language:zh-cn,zh;q=0.8,en-us;q=0.5,en;q=0.3
Accept-encoding:gzip, deflate
dnt:0
referer:http:/ /wwwtestcom/fileupload.php
connection:keep-alive
Content-type:multipart/form-data; boundary=------------- --------------25276621921226
content-length:451
-----------------------------25276621921226
Content-disposition:form-data; Name= "Testfile"; Filename= "Test.txt"
Content-type:text/plain
-----------------------------25276621921226
Content-disposition:form-data; Name= "Testfile"; Filename= "Test1.txt"
Content-type:text/plain
-----------------------------25276621921226
Content-disposition:form-data; Name= "TextInput"
textinputvalue
-----------------------------25276621921226--
HTML Form Enctype Property test