HTML input type file accept only Image or other specific file types

When uploading a file from our machine, we browse to the files which shows all files of all file types in the opened directory.
It makes tedious to find our file when many number of files is there. To simplify it, use accept attribute.
So we can filter it by which file type(s) you are going to upload will shown up.

Usage

To allow single file type: It allows JPEG images only.

<input type="file" accept="image/jpeg" />

To allow specified file types: It allows JPEG images and PNG images only.

<input type="file" accept="image/jpeg, image/png" />

To allow all specified same category file types: It allows all Image files.

<input type="file" accept="image/*" />

To allow all specified multiple category file types: It allows all Image, Video and Audio files.

<input accept="audio/*, video/*, image/*" />

Likewise accept attribute can use for all file types.

Note: Do not use it for validation process, validate the file in server.

HTML Files Posted on 2016-07-16 08:29:10