In this article I will explain with an example, how to use INPUT "type=file" to accept CSV file in HTML.
The accept attribute is a new attribute available in HTML5.
HTML Markup
The following HTML Markup consists of:
FileUpload – For uploading file.
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: Please note accepting all files is default behavior and hence even if the accept attribute is not specified, by default, it will accept all files.
For example, in the following code, the HTML5 INPUT FileUpload will only allow user to select CSV file i.e. file with extension csv.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<input type="file" accept=".csv" />
</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