The enctype is an attribute that plays an important role in determining the data in the form before sending it to the server. The most commonly used values for this attribute are multipart/form-data.
We will explore what enctype=”multipart/form-data” means, why it is necessary, and various examples in this blog.
Table of Contents:
What is enctype=‘multipart/form-data’?
The attribute ‘enctype’ specifies how data should be encoded when submitted to the server. In the case of simple text data, the default encoding type is application/x-www-form-urlencode.
When dealing with file upload, we need multipart/form-data because it allows you to send binary data, such as PDF, it formats the request; therefore, the server can interrupt and process the file, and it allows you to enable multiple file submissions.
Examples for enctype=‘multipart/form-data’ in HTML Form
There are a few examples below with the enctype attribute to create a simple form, upload multiple files, and upload images with additional form fields.
Example 1: Simple Form
A basic form that allows the users to upload a single file, such as an image or document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Single File Upload</title>
</head>
<body>
<form action="upload.php" method="POST" enctype="multipart/form-data">
<label for="file">Choose a file:</label>
<input type="file" name="file" id="file" required>
<button type="submit">Upload</button>
</form>
</body>
</html>Output:
Explanation: The attribute action is used for uploading the file to the server, and method= POST is chosen because GET can’t support the file upload process. You can ensure the data encoding action by enctype=”multipart/form-data”. The input type=”file” allows the users to select the file.
Example 2: Uploading Multiple files
It is the improved version of the above example, it allows the user to upload multiple files at a time to the server.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple File Upload</title>
</head>
<body>
<form action="upload.php" method="POST" enctype="multipart/form-data">
<label for="files">Choose multiple files:</label>
<input type="file" name="files[]" id="files" multiple required>
<button type="submit">Upload</button>
</form>
</body>
</html>Output:
Explanation: The name=”files[]” indicates that the user can upload multiple files. The multiple attributes enable the option for multiple file uploads, and upload.php is the server-side script that needs to process multiple files.
Example 3: Uploading an Image
You can also combine the file upload with additional text, such as a title and description.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple File Upload</title>
</head>
<body>
<form action="upload.php" method="POST" enctype="multipart/form-data">
<label for="title">Title:</label>
<input type="text" name="title" id="title" required>
<label for="description">Description:</label>
<textarea name="description" id="description" required></textarea>
<label for="image">Upload Image:</label>
<input type="file" name="image" id="image" required>
<button type="submit">Upload</button>
</form>
</body>
</html>Output:
Explanation: In this example form, you will have the text field with text and description along with the image. The enctype=”multipart/form-data” makes sure the image and text are sent properly. Both data need to be handled correctly by the server.
Example 4: Upload Profile Picture with User Name
You may have witnessed on the social media or member-based website, might get the profile picture along with the user name, and this can be done using the HTML form element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple File Upload</title>
</head>
<body>
<form action="profile_upload.php" method="POST" enctype="multipart/form-data">
<label for="username">Username:</label>
<input type="text" name="username" id="username" required>
<label for="profile_pic">Profile Picture:</label>
<input type="file" name="profile_pic" id="profile_pic" required>
<button type="submit">Upload</button>
</form>
</body>
</html>Output:
Explanation: The profile picture upload field lets users upload their profile pictures, and the server (profile_upload.php) processes both the username and profile picture.
Conclusion
You can use the attribute enctype to determine the data in the form before sending it to the server. We looked into the uses of enctype=”multipart/form-data” to upload single and multiple files and images with other types of input fields. Understanding the uses of this attribute is the key to uploading files on web pages.
What does enctype=‘multipart/form-data’ mean in an HTML Form? – FAQs
1. What is enctype=’multipart/form-data’?
It is the HTML attribute that is used to specify the form data to be encoded before submitting to the server.
2. When should I use enctype=’multipart/form-data’?
It can be used when your form has a file upload, such as an image or document.
3. What does multipart/form-data do?
It lets the form send files and text together by keeping them separate.
4. Is enctype=’multipart/form-data’ required for file uploads?
Yes, it is required when you have a file input field <input type=”file”> to encode the data.
5. What happens if I don’t use enctype=’multipart/form-data’ for file uploads?
The file cannot be properly uploaded or processed by the server.