Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

Adding file upload functionality to a webpage in HTML involves creating an input element of type “file” within a form element. By specifying the “enctype” attribute as “multipart/form-data” in the form, files can be uploaded to the server.

Examples of file uploads function to a webpage in HTML

Using Single File Upload

In this approach we use single file uploads in HTML, and use the <input type=”file”> element, allowing users to select and upload a single file to the server via a web form.

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>
    <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

In this approach we are using multiple file uploads in HTML, add the multiple attribute to the <input type=”file”> element. Use the enctype=”multipart/form-data” attribute in the form tag to ensure file data is read and sent to the server along with filenames.

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>
    <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>


Output:

Multiple File Upload example output



Last Updated : 11 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads