How to allow <input type="file"> to accept only image files?

html
kbvishnu picture kbvishnu · Sep 30, 2010 · Viewed 575.9k times · Source

I need to upload only image file through <input type="file"> tag.

Right now, it accepts all file types. But, I want to restrict it to only specific image file extensions which include .jpg, .gif etc.

How can I achieve this functionality?

Answer

madcap laughs picture madcap laughs · Jun 3, 2011

Use the accept attribute of the input tag. So to accept only PNGs, JPEGs and GIFs you can use the following code:

<input type="file" name="myImage" accept="image/x-png,image/gif,image/jpeg" />

Or simply:

<input type="file" name="myImage" accept="image/*" />

Note that this only provides a hint to the browser as to what file-types to display to the user, but this can be easily circumvented, so you should always validate the uploaded file on the server also.

It should work in IE 10+, Chrome, Firefox, Safari 6+, Opera 15+, but support is very sketchy on mobiles (as of 2015) and by some reports this may actually prevent some mobile browsers from uploading anything at all, so be sure to test your target platforms well.

For detailed browser support, see http://caniuse.com/#feat=input-file-accept

Related questions

How to create an HTML button that acts like a link?

I would like to create an HTML button that acts like a link. So, when you click the button, it redirects to a page. I would like it to be as accessible as possible. I would also like it so …

Read More
How do I check whether a checkbox is checked in jQuery?

I need to check the checked property of a checkbox and perform an action based on the checked property using jQuery. For example, if the age checkbox is checked, then I need to show a textbox to enter age, else …

Read More
How to horizontally center a <div>

How can I horizontally center a <div> within another <div> using CSS? <div id="outer"> <div id="inner">Foo foo</div> </div>

Read More