Introduction to the Enctype attribute of the Form tag and its application examples

Enctype : Specifies the type of encoding the browser uses when posting data back to the server. Used for uploading pictures in forms.

There are three encoding types:

application/x-www-form-urlencoded: Encode all characters before sending (default). This is the standard encoding format.
multipart/form-data: Do not encode characters. This value must be used when using a form that contains a file upload control.
text/plain: The form data is encoded as plain text, without any controls or formatting characters.

example:

Copy code

The code is as follows:

<form action="${pageContext.request.contextPath}/imageUpload_saveOrUpdate.action" method="post" enctype="multipart/form-data">
<div>
<label>Please select the upload image address:</label>
<input type="file" name="image"/>
</div>
</div>
<div>
<input type="submit" value="Upload"/>
</div>
</form>

The meaning of enctype="multipart/form-data" in the form is to set the MIME encoding of the form. By default, the encoding format is application/x-www-form-urlencoded, which cannot be used for file uploads; only when multipart/form-data is used can the file data be fully transmitted.

enctype="multipart/form-data" is used to upload binary data.

If you want to obtain the value of the corresponding form field through the Request object on the server side, you should set the enctype attribute to application/x-www-form-urlencoded (that is, the default value, which can be omitted).

Why do you need to set enctype="multipart/form-data" when uploading files?

Because: after setting enctype to multipart/form-data, if the characters are not encoded, the data is transmitted to the server in binary form. At this time, if you use request, you cannot directly get the value of the corresponding form. Instead, you should use the stream object to decode the binary data transmitted to the server and read the data.

If you want to upload a file, you must set the encotype to multipart/form-data.

<<: Detailed Example of CSS3 box-shadow Property

>>: Vue implements internationalization of web page language switching