HTML File Upload Input: <input type="file">
Use <input type="file"> when a form needs the user to choose a file from their device. A file-upload form should normally use method="post" and enctype="multipart/form-data".
<form action="uploadck.php" method="post" enctype="multipart/form-data">
<label for="file_up">Choose a file</label>
<input type="file" id="file_up" name="file_up">
<button type="submit">Upload</button>
</form>- Basic File Input
- Why multipart/form-data Is Required
- File Input Attributes
- Limit the Picker with accept
- Select Multiple Files
- Require a File Selection
- Labels and Accessibility
- What the Browser Shows After Selection
- HTML Validation vs Server Validation
- File Input Demo
- Complete Upload Form
- Common File Upload Form Mistakes
- Related Tutorials
- FAQs
Basic File Input Top ↑
The file control itself is created with:
<input type="file" name="file_up">The browser displays a file-selection control appropriate for the operating system and device. After the user chooses a file, the browser shows information about the selection, usually the file name.
Why multipart/form-data Is Required Top ↑
For a normal file upload, use:
<form action="uploadck.php" method="post" enctype="multipart/form-data">
<!-- File input and other controls -->
</form>multipart/form-data allows the request body to contain file data together with other form fields.
enctype="multipart/form-data" when submitting files. A file input inside a normal URL-encoded form will not send the uploaded file in the format expected by standard server-side upload handling.File Input Attributes Top ↑
| Attribute | Purpose |
|---|---|
type="file" | Creates a file-selection control. |
name | Defines the field name used by the receiving application. |
id | Identifies the control and connects it to a label. |
accept | Provides a hint about the file types the user should choose. |
multiple | Allows selection of more than one file where supported. |
required | Requires a file selection for browser constraint validation. |
disabled | Disables the control and normally excludes it from submission. |
Limit the Picker with accept Top ↑
The accept attribute tells the browser which file types are preferred in the file picker.
Images Top ↑
<input type="file" name="photo" accept="image/*">PDF files Top ↑
<input type="file" name="document" accept=".pdf,application/pdf">Several accepted types Top ↑
<input type="file" name="attachment" accept=".jpg,.jpeg,.png,.pdf">accept is a browser hint, not a security check. The server must inspect and validate the uploaded file independently. File extensions and browser-supplied MIME information cannot be trusted by themselves.Select Multiple Files Top ↑
Add the Boolean multiple attribute to allow several files to be selected:
<label for="photos">Choose photos</label>
<input type="file" id="photos" name="photos[]" accept="image/*" multiple>The array-style name photos[] is convenient when PHP receives several uploaded files under one logical field.
The exact selection interface varies by browser and operating system, so do not rely on one specific keyboard shortcut in your instructions.
Require a File Selection Top ↑
<label for="resume">Resume</label>
<input type="file" id="resume" name="resume" accept=".pdf" required>The browser can prevent normal form submission when no file is selected.
required attribute is only client-side validation. The receiving application must still verify that a valid upload was actually received.Labels and Accessibility Top ↑
Give the file input a visible label that explains what the user should upload.
<label for="profile_photo">Profile photo (JPG or PNG)</label>
<input type="file" id="profile_photo" name="profile_photo" accept=".jpg,.jpeg,.png">If size or format restrictions apply, explain them in visible text as well as enforcing them on the server.
What the Browser Shows After Selection Top ↑
The user chooses a local file through the browser's file picker. The control can then display the selected file name or number of selected files.
For security and privacy, JavaScript and HTML cannot arbitrarily set a file input to a local file path. A site must not assume it can prefill the user's local file selection.
HTML Validation vs Server Validation Top ↑
HTML attributes can guide the user, but upload security belongs on the server.
The receiving application should typically verify:
- whether an upload was actually received,
- the allowed file type and actual file content where relevant,
- the maximum permitted file size,
- the number of uploaded files,
- the destination and generated server-side file name,
- whether the current user is allowed to upload the file.
Server-side upload handling is covered in PHP file upload.
File Input Demo Top ↑
This demo displays the file-selection control but is intentionally not connected to an upload-processing script.
The button is type="button", so this demonstration does not submit the selected file.
Complete Upload Form Top ↑
<form enctype="multipart/form-data" action="uploadck.php" method="post">
<label for="file_up2">Upload a PDF</label>
<input
type="file"
id="file_up2"
name="file_up"
accept=".pdf,application/pdf"
required
>
<button type="submit">Send File</button>
</form>Common File Upload Form Mistakes Top ↑
Forgetting multipart/form-data Top ↑
Use enctype="multipart/form-data" on a form that uploads files.
Using GET for file uploads Top ↑
Use POST for normal HTML file-upload forms.
Assuming accept validates the uploaded file Top ↑
accept only guides the file picker. The server must independently validate the received file.
Expecting the user's real local path Top ↑
Browsers intentionally restrict local path information for privacy and security.
Trying to prefill a file input Top ↑
A website cannot freely set a user's local file selection. The user must choose the file.
Using only client-side size or type restrictions Top ↑
Client-side checks can improve usability but can be bypassed. Repeat all important checks on the server.
Trusting the uploaded filename Top ↑
Do not use the original filename as a trusted server path. Server-side upload code should apply its own safe naming and storage rules.
Related Tutorials Top ↑
Frequently Asked Questions Top ↑
Use input type="file".
Use enctype="multipart/form-data".
Normal HTML file-upload forms should use POST.
It gives the browser a hint about the file types the user should choose, but it does not securely validate the uploaded file.
Add the multiple Boolean attribute. The server must then be prepared to receive multiple uploaded files.
No. HTML can guide the selection, but the server must validate the file type, size, content and storage rules.
No. Browsers restrict programmatic file selection for security and privacy; the user must choose the local file.
Submit Button HTML Table HTML Form Buttons in Form Reset Button
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
