In this article I will explain with an example, how to use INPUT "type=file" to accept doc, docx and PDF files in HTML.
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 Document and PDF files i.e. files with extension doc, docx and pdf.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<input type="file" accept=".doc, .docx, .pdf" />
</body>
</html>
Screenshot
Browser Compatibility
The above code has been tested in the following browsers only in versions that support HTML5.
* All browser logos displayed above are property of their respective owners.
Demo
Downloads