Well this is embarrassing… I found the solution I was looking for and it couldn’t be simpler. I used the following code to get the desired result.
<input id="fileSelect" type="file" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
Valid Accept Types:
For CSV files (.csv), use:
<input type="file" accept=".csv" />
For Excel Files 97-2003 (.xls), use:
<input type="file" accept="application/vnd.ms-excel" />
For Excel Files 2007+ (.xlsx), use:
<input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />
For Text Files (.txt) use:
<input type="file" accept="text/plain" />
For Image Files (.png/.jpg/etc), use:
<input type="file" accept="image/*" />
For HTML Files (.htm,.html), use:
<input type="file" accept="text/html" />
For Video Files (.avi, .mpg, .mpeg, .mp4), use:
<input type="file" accept="video/*" />
For Audio Files (.mp3, .wav, etc), use:
<input type="file" accept="audio/*" />
For PDF Files, use:
<input type="file" accept=".pdf" />
DEMO:
http://jsfiddle.net/dirtyd77/LzLcZ/144/
NOTE:
If you are trying to display Excel CSV files (.csv), do NOT use:
text/csvapplication/csvtext/comma-separated-values(works in Opera only).
If you are trying to display a particular file type (for example, a WAV or PDF), then this will almost always work…
<input type="file" accept=".FILETYPE" />
Here’s the reason why it is so:
The application types often mean where to open the file.
For example, Abode Reader.
But when this file is uploaded, the browser doesn’t care about opening and asking that app about it. But the extension, however, or type words like the MIME image or audio etcetera work applying directly to file units.
It is possible to use them in relation to a File DOM instance.
So, you should use the extension format name.
On many devices, like mobiles, it is seen when you click select File, that the non- accepted files in the user menu are excluded in grey…
Have a great time spent with your files!