How do you get a HTML Browse button to filter and show only images?

Question

On an HTML page, using the INPUT tag, how can you get it so that when you click the browse button that it filters for image files only? Bonus points if it can include .bmp files.

Answer 1

In theory, with the accept attribute.

In practice, you can't.

I believe most people who want to do this resort to Flash.

Answer 2

With the accept attribute, you list the mime types to accept.

<form action="form_action.asp" accept="image/gif, image/jpeg">
    First name: <input type="text" name="fname" /><br />
    Last name: <input type="text" name="lname" /><br />
    Your image: <input type="file" name="pic" id="pic" /><br />
    <input type="submit" value="Submit" />
</form>

Taken from here.

Answer 3

Use the "accept" attribute on your input tag.

E.g.:

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

EDIT: On further reading, it seems this isn't properly supported by any major browsers and therefore shouldn't be used. Instead it look like you'll need to use some sort of server-side or JavaScript validation instead.

Answer 4

What you're talking about is the accept attribute, which unfortunately, isn't supported by any browser.

Answer 5

The accept attribute of the HTML <form> element is meant for that, but this optional attribute is ignored by almost all webbrowsers. The answer is Flash or Java Applet. For both there exist 3rd party programs. E.g. Uploadify, SWFUpload and JumpLoader. Uploadify has my recommendation.

Answer 6

Supposedly, you should use the "accept" attribute with the correct MIME type like so:

<input type="file" name="pic" id="pic" accept="image/bmp" />

Sadly, this isn't currently supported by any browsers. You can however validate the file using javascript afterwards. Here is a useful link with code: http://www.cs.tut.fi/~jkorpela/forms/file.html#filter

Hope this helps!