HTML: How to limit file upload to be only images?

Question

With HTML, how do I limit what kind of filetypes can be uploaded?

To easy the user experience, I want to limit file uploads to be only images (jpeg, gif, png).

<form method="post" action="..." enctype="multipart/form-data">
<label for="image">Photo</label>
<input name="image" type="file" />
</form>

Answer 1

Edited

If things were as they SHOULD be, you could do this via the "Accept" attribute.

http://www.webmasterworld.com/forum21/6310.htm

However, browsers pretty much ignore this, so this is irrelavant. The short answer is, i don't think there is a way to do it in HTML. You'd have to check it server-side instead.

The following older post has some information that could help you with alternatives.

http://stackoverflow.com/questions/181214/file-input-accept-attribute-is-it-useful

Answer 2

You can only do this securely on the server-side. Using the "accept" attribute is good, but must also be validated on the server side lest users be able to cURL to your script without that limitation.

I suggest that you: discard any non-image file, warn the user, and redisplay the form.

Answer 3

Ultimately, the filter that is displayed in the Browse window is set by the browser. You can specify all of the filters you want in the Accept attribute, but you have no guarantee that your user's browser will adhere to it.

Your best bet is to do some kind of filtering in the back end on the server.

Answer 4

HTML5 says <input type=file accept="image/*">. Of course, never trust client-side validation; always check again on the server-side.