In this article I will explain with an example, how to use Accept attribute in HTML5 INPUT File Upload.
 
 
HTML Markup
The following HTML Markup consists of an HTML5 INPUT FileUpload element.
The HTML5 INPUT FileUpload has been set with the following attribute.
accept - This attribute allows user to select only specified type of files from the Choose File dialog box.
Note: It accepts one or more than one file extension with comma-separated value.
 
For example, in the following code, the HTML5 INPUT FileUpload will only allow user to select PDF file i.e. file with extension pdf.
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <input type="file" accept=".pdf" />
</body>
</html>
 
 
Screenshot
Using Accept attribute in HTML5 INPUT File Upload
 
 
Browser Compatibility

The above code has been tested in the following browsers only in versions that support HTML5.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Demo
 
 
Downloads