How to make <input type="file"/> accept only these types?

I want my uploader only allows these types:

• doc, docx.
• xls, xlsx.
• ppt, pptx.
• txt.
• pdf.
• Image types.

How can I achieve this? What should I put in the accept attribute? Thanks for your help.

EDIT!!!

I have one more thing to ask. When the popup appears for use to choose file, at the down right corner, there is a drop down list contains all allow files. In my case, the list would be long. I see in the list, there is an option called All Supported Types. How can I make it chosen by default and eliminate all other options?

Any help will be appreciated. Thank you.

Solution 1:

The value of the accept attribute is, as per HTML5 LC, a comma-separated list of items, each of which is a specific media type like image/gif, or a notation like image/* that refers to all image types, or a filename extension like .gif. IE 10+ and Chrome support all of these, whereas Firefox does not support the extensions. Thus, the safest way is to use media types and notations like image/*, in this case

<input type="file" name="foo" accept=
"application/msword, application/vnd.ms-excel, application/vnd.ms-powerpoint,
text/plain, application/pdf, image/*">

if I understand the intents correctly. Beware that browsers might not recognize the media type names exactly as specified in the authoritative registry, so some testing is needed.

Solution 2:

Use Like below

<input type="file" accept=".xlsx,.xls,image/*,.doc, .docx,.ppt, .pptx,.txt,.pdf" />

Solution 3:

Use accept attribute with the MIME_type as values

<input type="file" accept="image/gif, image/jpeg" />