In this article I will explain with an example, how to restrict specific files only i.e. accept only specific type of files in HTML5 INPUT FileUpload element.
 
 
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 Word Documents i.e. files with extension doc and docx.
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <input type="file" accept=".doc, .docx" />
</body>
</html>
 
 
Screenshot
Restrict files selection in HTML5 FileUpload
 
 
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