The <input type="file"> HTML element allows users to select one or more files from their device storage to upload to a server. This is crucial for web applications requiring user-submitted content like images, documents, or videos.
Example 1: Basic File Input
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic File Upload</title>
</head>
<body>
<form action="/upload" method="post" enctype="multipart/form-data">
<label for="myFile">Choose a file:</label>
<input type="file" id="myFile" name="filename"> <input type="submit" value="Upload File">
</form>
</body>
</html>
Explanation This example demonstrates the simplest form of a file upload input. The type="file" attribute is essential, and the name attribute is used to identify the file data when submitted via a form.
Example 2: Accepting Specific File Types
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accept Image Upload</title>
</head>
<body>
<form action="/upload-images" method="post" enctype="multipart/form-data">
<label for="imageUpload">Upload Images (JPG, PNG):</label>
<input type="file" id="imageUpload" name="images" accept=".jpg, .jpeg, .png"> <input type="submit" value="Upload Images">
</form>
</body>
</html>
Explanation The accept attribute is used here to restrict the types of files a user can select, improving user experience by guiding them. This example specifically allows common image formats like JPEG and PNG.
Example 3: Allowing Multiple File Selection
<!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-multiple" method="post" enctype="multipart/form-data">
<label for="multiFiles">Select Multiple Files:</label>
<input type="file" id="multiFiles" name="files[]" multiple> <input type="submit" value="Upload All Files">
</form>
</body>
</html>
Explanation Adding the multiple attribute to the <input type="file"> element allows users to select more than one file at a time. The name="files[]" convention is commonly used for array-like submission of multiple files.
Example 4: File Input with a Directory Picker
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Directory Upload</title>
</head>
<body>
<form action="/upload-directory" method="post" enctype="multipart/form-data">
<label for="folderUpload">Upload a Folder:</label>
<input type="file" id="folderUpload" name="folder" webkitdirectory directory> <input type="submit" value="Upload Folder">
</form>
</body>
</html>
Explanation The webkitdirectory (and its standardized counterpart directory) attribute allows users to select an entire directory for upload. This can be very useful for uploading project folders.
Example 5: File Input with JavaScript Interaction (Displaying Filename)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>File Display</title>
</head>
<body>
<label for="jsFile">Select a File:</label>
<input type="file" id="jsFile" name="jsFilename">
<p>Selected file: <span id="fileNameDisplay">None</span></p>
<script>
const fileInput = document.getElementById('jsFile');
const fileNameDisplay = document.getElementById('fileNameDisplay');
// Add an event listener to update the displayed file name when a file is selected
fileInput.addEventListener('change', (event) => {
if (event.target.files.length > 0) {
fileNameDisplay.textContent = event.target.files[0].name; // Get the name of the first selected file
} else {
fileNameDisplay.textContent = 'None';
}
});
</script>
</body>
</html>
Explanation This example demonstrates how JavaScript can be used to interact with the file input. It listens for the change event to capture the selected file's name and display it to the user, providing immediate feedback.