How to add file uploads function to a webpage in HTML ?

Last Updated : 26 Sep, 2024

Adding a file upload function to a webpage in HTML allows users to select and upload files from their device to a server. This is achieved using the <input type=”file”> element within a form, enabling file selection and submission for processing or storage.

Table of Content

Using Single File Upload
Using Multiple File Upload

Using Single File Upload

Single File Upload in HTML allows users to select and upload one file at a time using the <input type=”file”> element. The form requires enctype=”multipart/form-data” to ensure the file is properly sent to the server for processing.

Syntax

<input type="file" id="myfile" name="myfile" />

Example 1: In this example we displays a file-select field enabling users to upload a single file to the server using the <input type=”file”> element within a form with enctype set to “multipart/form-data”.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        Using Single File Upload
    </title>
</head>

<body>
    <h1>Show File-select Fields</h1>
    <h3>
        Show a file-select field which allows
        only one file to be chosen:
    </h3>
    <form action="/action_page.php" enctype="multipart/form-data">
        <label for="myfile">Select a file:</label>
        <input type="file" id="myfile" name="myfile" />
        <br /><br />
        <input type="submit" />
    </form>
</body>

</html>

Output:

Single File Upload example output

Using Multiple File Upload

Multiple File Upload in HTML allows users to select and upload several files simultaneously by adding the multiple attribute to the <input type=”file”> element. The form uses enctype=”multipart/form-data” to properly handle the uploaded files on the server.

Syntax

<input type="file" id="myfile" name="myfile" multiple>

Example : In this example we creates a file-select field allowing users to choose multiple files. The form includes the enctype=”multipart/form-data” attribute to handle file uploads, enhancing website functionality.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        Using Multiple File Upload
    </title>
</head>

<body>
    <h1>Show File-select Fields</h1>

    <h3>
        Show a file-select field which allows
        multiple files to be chosen:
    </h3>
    <form action="/action_page.php" enctype="multipart/form-data">
        <label for="myfile">Select a file:</label>
        <input type="file" 
               id="myfile" 
               name="myfile" 
               multiple="multiple" />
        <br /><br />
        <input type="submit" />
    </form>
</body>

</html>