HTML <input type='file'> apply a filter

There is an "accept" attribute on file input controls, where you can specify the types of files you want. From what i'm seeing, though, many browsers like to ignore it -- the file types that can be specified are MIME types, so a strictly correct browser would have to look at every file regardless of extension and see if it's an image (and if so, what type it is).

Update: It seems at least some version of every major browser on Windows now provides at least some support for the accept attribute. (Even IE supports it, as of version 10.) However, it's still a bit early yet to rely on it, as IE 8 and 9 still don't support it. And support in general is a bit spotty.

• Chrome seems to have full support. It uses its own built-in list of types as well as the system's...so if either one defines the type, Chrome knows which files to show.
• IE 10 supports file extensions beautifully, and MIME types decently. It seems to use only the system's mapping of MIME type to extensions, though...which basically means if something on the user's computer didn't register those extensions with the right MIME types, IE won't show files of those MIME types.
• Opera only seems to support MIME types -- to the point where extensions actually disable the filter -- and the UI for the file selector sucks. You have to select a type in order to see the files of that type.
• Firefox appears to support only a limited set of types, and ignore other types as well as extensions.
• I don't have Safari, and don't plan on downloading it. If someone could document Safari's support... Partial support on safari. http://caniuse.com/#search=accept

You should consider adding the attribute, so browsers that support it can help the user find the right files more easily. But i would still suggest that you check the filename after the fi

You can't control which files can be selected, but you can read the filename with javascript after the file is chosen. You could then display a warning and/or disable the submit button if the file is the wrong type. However, remember that you can't rely on the extension to tell you whether or not the file is really of the right type. It should only be treated as a way to help users who might otherwise waste time uploading a huge file before discovering that you don't support that file type.

Here's some example code to do that. It uses jQuery, but you could do the same in plain javascript too.

$(function() {
    $('#inputId').change( function() {
        var filename = $(this).val();
        if ( ! /\.txt$/.test(filename)) {
            alert('Please select a text file');
        }
    });
});