Input type file in HTML

<input type="file"> let the user chose one or more file from the storage which can be uploaded to server using form submission or can be manipulated using JavaScript.
Let us have a look at the example.


<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <label for="">Select Profile Pic</label>
        <div>
            <input type="file" accept="image/png, image/jpeg" />
        </div>
    </body>
</html>
                        

In above example, <option> is nested inside <select>. Each <option> element represents each item in menu.

Attributes

Following attributes can be used while using file input.

accept attribute

accept attribute limits the file input to select only specified file.
In above example, accept="image/png, image/jpeg" which limits the file input to select only png, jpeg files.
Let us have a look at an example.


<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <label for="">Select Profile Pic</label>
        <div>
            <input type="file" accept=".doc,.docx" />
        </div>
    </body>
</html>
                        

In the above example, the file input box will only accept the files with the extension .doc and .docx.

multiple attribute

When multiple attribute specified file input box lets you select multiple files.

Content Specifiers

You can assign accept attribute any valid mime type or extension to select the particular type of file.

  • Valid case-insensitive file extension starting with a period(.)

    For example: ".jpg", ".pdf", or ".doc"

  • A valid MIME type

    For example: text/plain is for plain text file

  • for any audio file audio/*
  • for any video file video/*
  • for any image file image/*

Above are unique value for accept attribute which will be useful.

Conclusion

In this section, we have learned about the file select input.
In next section, we will learn about forms in HTML.