Filter Extensions in HTML form upload

<input type='file' name='userFile'>

now when i will click the browse button, the browse dialog will show all files... what if i want to filter file types lets say

• only images or .png & .jpg & .gifs
• only office file like .doc & .docx & .pps

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

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

<form enctype="multipart/form-data" action="uploader.php" method="POST">
Upload DRP File:<input name="Upload Saved Replay" type="file" accept="*.drp"/><br />
<input type="submit" value="Upload File" />
</form>