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

<form action="..."
enctype=multipart/form-data method=post
onsubmit="return checkPNG(document.getElementById('img'))">
<label for=img>Your image (.png):</label>
<input type=file id=img name=img accept=
"image/png, .png" onchange="return checkPNG(this)">
<input type=submit value=Send>
</form>
<div id=f></div>
<script>
function checkPNG(el) {
  if(el.value) {
    var parts = el.value.split('.');
    if(parts[parts.length - 1].toLowerCase() === 'png') {
      return true;
    } else {
      alert('Please specify a PNG file.');
      return false;
    }
  } else {
    return true;
  }
}
</script>

accept
If the value of the type attribute is file, this attribute indicates the types of files that the server accepts; otherwise it is ignored. The value must be a comma-separated list of unique content type specifiers:
A valid MIME type with no extensions
audio/* representing sound files HTML5
video/* representing video files HTML5
image/* representing image files HTML5

function checkFileExt(el) {
    var accept=el.getAttribute("accept");
    if(el.value && el.value!="" && accept && accept!="") {
        var parts = el.value.split('.');

        if(parts.length==1) {
            alert("File with no extension: '"+el.value+"'. Allowed: "+accept);
            return false;
        }

        var ext=parts[parts.length - 1].toLowerCase();

        accept=accept.split(',');
        var found=false;
        for(var i=0;i<accept.length;i++) {
            if("."+ext==accept[i]) found=true;
        }
        if(found) {
            return true;
        } else {
            alert("Wrong file: '"+el.value+"'. Allowed: "+accept);
            return false;
        }
    } else {
        return true;
    }
}

<input name="fle_txt" value="" accept=".txt,.doc,.docx,.xls,.xlsx" onchange="checkFileExt(this);" type="file">