Limit file format when using <input type="file">?

Question

I'd like to restrict the type of file that can be chosen from the native OS file chooser when the user clicks the Browse button in the `<input type="file">` element in HTML. I have a feeling it's impossible, but I'd like to know if there _is_ a solution. I'd like to keep solely to HTML and JavaScript; no Flash please.

Answer 1

Use the following modification to the file input tag:

<input type="file" accept="comma separated list of acceptable extensions" />

For Example, to allow only png, jpg, or gif image files:

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

Some (older) browsers require MIME types rather than extensions:

Ex: Same as above <input type="file" accept="image/png,image/jpg,image/gif" />

Ex: All video types: <input type="file" accept="video/*" />

For maximum compatibility, combine the two:

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

The results you get depend on the browser you use, but for the most part the last one should be the most compatible.