Skip to content
Related Articles

Related Articles

Improve Article

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

  • Last Updated : 31 Aug, 2021

Allowing file upload to your website becomes necessary when you want to get the data from users in the form of a document, image, or file. HTML allows you to add the file upload functionality to your website by adding a file upload button to your webpage with the help of the <input> tag. 

The <input type=”file”> defines a file-select field and a Browse button for file uploads.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

Syntax:

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

Example 1: The code with the file upload functionality can be seen below. The output shows a file upload button that reads “Choose File”. With the help of this button, we can upload the files to a particular website.



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:

File upload

Example 2: To define a file-select field that allows multiple files to be selected, add the multiple attribute as follows.

Syntax:

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

In this way, we can create and upload a file button to our website. In order to make sure that the file data is read from the file to send to the server, make sure to use the “enctype=”multipart/form-data” attribute within the form tag. If this attribute is not used, the file data will not be read but only the file name will be read.

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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :