How do I get a html5 file input to accept only certain file types consistently across browsers?

Question

According to this answer on Stack Overflow, we can set the accept attribute of an <input type="file" /> to filter accepted input, as follows:

accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"

However, as you can notice running the simple snippet below, Chrome 43.0.something appears to simply disregard this configuration, while it is perfectly understood by Firefox 39.0.

I considered switching to a more blunt approach, using:

accept=".xls, .xlsx"

... which works fine in Chrome but makes Firefox somewhat confused, accepting only the files using the .xlsx extension.

---

Considering that this is probably very common and basic, I must be missing something: where am I screwing up? How do I get a html5 file input to suggest only .xls and .xlsx files consistently across browsers?

Here's a code snippet illustrating my issue (along with a JSFiddle link in case you'd wanna fiddle with it).

Accepts application/vnd.ms-excel and the likes:<br />
<label for="file1">File input</label>
<input type="file" name="file1" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"/>
<hr />
Accepts .xls and .xlsx:<br />
<label for="file2">File input</label>
<input type="file" name="file2" accept=".xls, .xlsx"/>

Answer 1

Transfer them both mime-type and extension

<input type="file" name="file2" accept="text/csv, .csv"/>

Answer 2

DISCLAIMER: This is not an answer by any means, but merely a note to the potential other readers trying to use this attribute in a wrong way.

---

On this non-official W3C reference of the accept attribute, you can find the following:

Tip: Do not use this attribute as a validation tool. File uploads should be validated on the server.

It´s not recommended to use this attribute for validation, because the users could somehow work around it and not all browsers behave the same.