2
<input type="file" accept=".csv" />

Above code allows to uploading of .txt or any type of file also.

How to restrict other file types in html5?

Nitul
  • 917
  • 9
  • 31
  • possible duplicate of [File input 'accept' attribute - is it useful?](http://stackoverflow.com/questions/181214/file-input-accept-attribute-is-it-useful) –  Mar 02 '15 at 06:54
  • possible duplicate of [restrict file upload selection to specific types](http://stackoverflow.com/questions/7575482/restrict-file-upload-selection-to-specific-types) – FH-Inway Mar 02 '15 at 06:56

3 Answers3

2

You can't restrict other file types in html5 file input, if user select other files it allow to select. Attribute 'accept' just give hint to user about supported file types.

Nitul
  • 917
  • 9
  • 31
1

With the input attribute you can specify any file extension to be uploaded. To add multiple attributes, separate them with a comma as so:

<input type="file" accept=".txt,.jpg">

You can also set a predefined family of extensions to be available for upload. Simply use either audio/*, video/*, or image/* to select those file types respectively. These can also be combined with regular file extensions. E.g.

<input type="file" accept="image/*,.psd">

This lets you upload an image or Photoshop file.

I hope this helps!

angussidney
  • 644
  • 1
  • 14
  • 23
  • Still you can upload any type of file. – Nitul Mar 02 '15 at 08:58
  • 1
    @Nitul Yes, but the selection dialog defaults to those file types. Checking and restricting of the files should be done client side (e.g. JavaScript), not via the HTML tag. This attribute just helps reduce the number of incorrect file types uploaded. – angussidney Mar 02 '15 at 09:13
  • 1
    And server-side checks are very important as well, because a malicious user can do a custom HTTP request to bypass the client-side checks – angussidney Mar 02 '15 at 09:24
-1

Try this 

<input id="fileSelect" type="file" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />

Also Check this with more details http://jsfiddle.net/dirtyd77/LzLcZ/144/

dyaa
  • 1,290
  • 16
  • 40