Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How do we upload external file on a website using HTML forms?
If you want to allow a user to upload an external file to your website, you need to use a file upload box, also known as a file select box. This is created using the <input> element with the type attribute set to file.
Basic File Upload Example
Here's a simple HTML form with a file upload input:
<!DOCTYPE html>
<html>
<head>
<title>File Upload</title>
</head>
<body>
<form action="/upload" method="post" enctype="multipart/form-data">
<label for="fileUpload">Choose file to upload:</label><br><br>
<input type="file" id="fileUpload" name="upload" accept="image/*" /><br><br>
<input type="submit" value="Upload File" />
</form>
</body>
</html>
Key Attributes
| Attribute | Description | Example |
|---|---|---|
| name | Identifies the control when form is submitted | name="upload" |
| accept | Specifies allowed file types | accept="image/*" |
| multiple | Allows selecting multiple files | multiple |
File Type Restrictions
You can restrict file types using the accept attribute:
<!-- Images only --> <input type="file" accept="image/*" /> <!-- Specific image formats --> <input type="file" accept=".jpg,.jpeg,.png,.gif" /> <!-- Documents only --> <input type="file" accept=".pdf,.doc,.docx,.txt" /> <!-- Multiple files --> <input type="file" multiple accept="image/*" />
Complete Upload Form
<!DOCTYPE html>
<html>
<head>
<title>Complete File Upload Form</title>
<style>
.upload-form {
max-width: 400px;
margin: 20px auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 5px;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input[type="file"] {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 3px;
}
input[type="submit"] {
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 3px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="upload-form">
<h2>Upload Your File</h2>
<form action="/upload" method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="userFile">Select file:</label>
<input type="file" id="userFile" name="userFile" accept="image/*,.pdf,.doc,.docx" required />
</div>
<div class="form-group">
<input type="submit" value="Upload File" />
</div>
</form>
</div>
</body>
</html>
Important Form Requirements
For file uploads to work properly, your form must include:
-
method="post"- Files cannot be uploaded using GET -
enctype="multipart/form-data"- Required for file uploads -
actionattribute pointing to your server-side upload handler
Conclusion
HTML file uploads require an <input type="file"> element within a form that uses POST method and multipart encoding. Use the accept attribute to restrict file types and improve user experience.
Updated on: 2026-03-15T23:18:59+05:30
5K+ Views
Advertisements