Open In App

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

Last Updated : 26 Sep, 2024
Comments
Improve
Suggest changes
6 Likes
Like
Report

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

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>

Output:

Multiple File Upload example output


M

mohitg593
Improve
Article Tags :

Explore

Lightbox