HTML File Upload

Whether it’s uploading a resume, a photo of a cherry, or a PDF recipe, HTML's <input type="file"> makes it possible. This control allows users to select one or more files from their device and send them through a form.

The simplest file input accepts a single file of any type:

<form action="/upload" method="post" enctype="multipart/form-data">
  <label for="file">Upload a file:</label><br>
  <input type="file" id="file" name="fruitFile"><br><br>
  <input type="submit" value="Upload">
</form>

Upload a file: [Choose File] No file chosen  
[Upload]

Important: Always use enctype="multipart/form-data" in the form tag when uploading files. This tells the browser to send binary data correctly.

To limit what users can upload, use the accept attribute with file extensions or MIME types.

Images only:

<input type="file" name="fruitImage" accept="image/*">

PDFs only:

<input type="file" name="doc" accept=".pdf">

CSV or Text files:

<input type="file" name="dataFile" accept=".csv, .txt">

Choose File: Only matching types are selectable

This prevents accidental uploads of unsupported file types and streamlines user choices.

To allow users to select more than one file, add the multiple attribute:

<input type="file" name="fruitPhotos" accept="image/*" multiple>

Choose File: (you can select multiple images)

All selected files will be submitted under the same input name.

<form action="/submit-fruit-gallery" method="post" enctype="multipart/form-data">

  <label for="applePic">Upload an apple photo:</label><br>
  <input type="file" id="applePic" name="applePic" accept="image/*"><br><br>

  <label for="bananaFiles">Upload multiple banana images:</label><br>
  <input type="file" id="bananaFiles" name="bananaPhotos" accept="image/*" multiple><br><br>

  <label for="cherryPDF">Upload cherry info (PDF only):</label><br>
  <input type="file" id="cherryPDF" name="cherryDoc" accept=".pdf"><br><br>

  <input type="submit" value="Submit Gallery">

</form>

[Choose File] Apple photo  
[Choose Files] Banana images  
[Choose File] Cherry PDF  
[Submit Gallery]

• Always use enctype="multipart/form-data" on the form
• Use accept to limit file types and prevent user confusion
• Apply multiple only when needed to avoid clutter
• Label clearly so users know what file they’re uploading

All major modern browsers support file input fields. If unsupported, users may see a basic text field — but this is rare today.

HTML file inputs make it easy for users to send images, documents, and more. You’ve now learned how to:

• Use <input type="file">
• Restrict file types using accept
• Enable multiple file uploads
• Structure forms for file transmission

Choose the option that lists all and only the correct statements.

1. <input type="file" accept=".jpg,.png">

2. <input type="file" accept="image/*">

3. <input type="file" types="pdf">

4. <input type="file" accept="application/pdf">

Choose the option that lists all and only the correct statements.

1. Uploading scanned report cards
2. Choosing a background color for UI
3. Submitting practical lab images
4. Attaching student ID proofs

Next, let’s discover how Datalist inputs offer flexible suggestions without limiting user freedom — the perfect blend of control and creativity.