<input type="file"> limit selectable files by extensions

html input-type-file
haemse picture haemse · Apr 26, 2011 · Viewed 163.3k times · Source

How can someone limit the files that can be selected with the input type="file" element by extensions?

I already know the accept attribute, but in chrome it does limit the files by the last MIME Type defined (in this case "gif") and FF4 does not even limit anything.

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

Am I doing anything wrong or is there another way?

Answer

Edi Budimilic picture Edi Budimilic · Feb 4, 2014

Easy way of doing it would be:

<input type="file" accept=".gif,.jpg,.jpeg,.png,.doc,.docx">

Works with all browsers, except IE9. I haven't tested it in IE10+.

Related questions

How to clear files from <input type='file' /> using jQuery or JavaScript

There are several <input type='file' /> fields in my file and there are no any html forms. I want to clear attached files from particular <input type='file' />. Not from the all fields. I have use $(…

Read More
Prevent html input type file from showing open dialog

To make a long story short, I need to be able to prevent the default action from a input type="file". In other words I do not want to display the system's open dialog box when the user clicks on …

Read More
How to change the format of input type datetime-local?

I am giving an input field with type datetime-local, <input type="datetime-local" class="form-control" name="booking_checkin"> In which after filling and viewing it, the format is like this, 2017-08-06T02:32 . It looks like awkward and i …

Read More