What does enctype='multipart/form-data' mean?
When you make a POST request, you have to encode the data that forms the body of the request in some way.
HTML forms provide three methods of encoding.
application/x-www-form-urlencoded
(the default)multipart/form-data
text/plain
Work was being done on adding application/json
, but that has been abandoned.
(Other encodings are possible with HTTP requests generated using other means than an HTML form submission. JSON is a common format for use with web services and some still use SOAP.)
The specifics of the formats don't matter to most developers. The important points are:
- Never use
text/plain
.
When you are writing client-side code:
- use
multipart/form-data
when your form includes any<input type="file">
elements - otherwise you can use
multipart/form-data
orapplication/x-www-form-urlencoded
butapplication/x-www-form-urlencoded
will be more efficient
When you are writing server-side code:
- Use a prewritten form handling library
Most (such as Perl's CGI->param
or the one exposed by PHP's $_POST
superglobal) will take care of the differences for you. Don't bother trying to parse the raw input received by the server.
Sometimes you will find a library that can't handle both formats. Node.js's most popular library for handling form data is body-parser which cannot handle multipart requests (but has documentation that recommends some alternatives which can).
If you are writing (or debugging) a library for parsing or generating the raw data, then you need to start worrying about the format. You might also want to know about it for interest's sake.
application/x-www-form-urlencoded
is more or less the same as a query string on the end of the URL.
multipart/form-data
is significantly more complicated but it allows entire files to be included in the data. An example of the result can be found in the HTML 4 specification.
text/plain
is introduced by HTML 5 and is useful only for debugging — from the spec: They are not reliably interpretable by computer — and I'd argue that the others combined with tools (like the Network Panel in the developer tools of most browsers) are better for that).
Why not use enctype=multipart/form-data always?
From the RFC that defines multipart/form-data
:
Many web applications use the "application/x-www-form-urlencoded"
method for returning data from forms. This format is quite compact,
for example:
name=Xavier+Xantico&verdict=Yes&colour=Blue&happy=sad&Utf%F6r=Send
However, there is no opportunity to label the enclosed data with a
content type, apply a charset, or use other encoding mechanisms.Many form-interpreting programs (primarily web browsers) now
implement and generate multipart/form-data, but a receiving
application might also need to support the
"application/x-www-form-urlencoded" format.
Aside from letting you upload files, multipart/form-data
also allows you to use other charsets and encoding mechanisms. So the only reasons not to use it are:
If you want to save a bit of bandwidth (bearing in mind that this becomes much less of an issue if the request body is compressed).
If you need to support really old clients that can't handle file uploads and only know
application/x-www-form-urlencoded
, or that have issues handling anything other than ASCII.
Use `enctype=multipart/form-data` always or never?
When uploading a file in your form, you should specify the encoding as "multipart/form-data".
If you want to keep your form generic, omit this attribute in the form and directly override it using formenctype attribute of input or button elements (only possible in browsers with HTML5 support).
In your case, change:
<form action="upload.php" method="post" enctype="multipart/form-data">
Select image to upload:
<input type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Upload Image" name="submit">
</form>
to:
<form action="upload.php" method="post">
Select image to upload:
<input type="file" name="fileToUpload" id="fileToUpload" formenctype="multipart/form-data">
<input type="submit" value="Upload Image" name="submit">
</form>
Also, you can check this question where it was recommended to avoid always using enctype="multipart/form-data"
.
What is the difference enctype=multipart/form-data and enctype=multipart/form-data;charset=utf-8
In the first example you are using whatever the pages default charset is, which probably the ISO-8859-1 charset which doesn't have the extended characters. By forcing it into UTF-8 you get the additional characters. See http://www.w3schools.com/html/html_charset.asp for more information.
form does not send data with enctype=multipart/formdata
This problem solved by increasing post_max_size
in php.ini
file. The default value is 8MB, you can increase this value.
HTML Form With Enctype Breaks $_POST Data
To anyone who suffers the same problem, check out this page:
WAMP Uploading large File
The question gives the values you need to change in your php.ini file to allow larger file uploads (that's what was breaking the form).
Spring Boot doesn't recognize multipart form-data element when filename is missing
It looks like you have to provide the filename. see this issue
This [The situation in which filename is not present] can lead to inconsistencies, e.g. you would get it with
MultipartFile but not with collection or array of MultipartFile, and
one can make the opposite argument that it should be rejected.Why does it matter to have it injected as MultipartFile if it doesn't
even have a filename? You could also inject it as InputStream or any
other type supported by a registered HttpMessageConverter.
Related Topics
Fixed Header Table With Horizontal Scrollbar and Vertical Scrollbar On
How to Display Multiple Lines of Text in Svg
How to Use Two Ngfor in HTML Angular 4
How to Add HTML Line Break Within an Input Text Placeholder
Having Difficulty Understanding How to Remove Some Padding
How to Remove the Default Arrow Icon from a Dropdown List (Select Element)
How to Avoid Element from Expanding When Its Content Text Font-Size Gets Bigger
How to Arrange HTML Label and Input Side by Side
How to Affect Other Elements When One Element Is Hovered
Regex Select All Text Between Tags
Embed Pdf on a Webpage and Prevent Download
Angular 4 Img Src Is Not Found
Print Header/Footer on All Pages (Print Mode)
How to Disable Hover Effect for Active Link
How to Disable an Input Dynamically With Angular 7