html - How to restrict my input type="file" to accept only png image files not working in Firefox

Question

I am using input type="file", Now my requirement is that I only want to select png images, that is when I select browse a "png" filter should be applied.

I have referred www.w3schools.com/tags/att_input_accept.asp and below is the code I am using, this works fine with Chrome but does not work with Firefox and IE.

Please can anyone help me understand what wrong I must be doing ?

 <h2>Below uses accept="image/*"</h2>
 <input type="file" name="pic1" accept="image/*" /> 

 <h2>Below I need to accept only for png</h2>
 <input type="file" name="pic1" accept="image/png" /> 

?Here is a fiddle link to it http://jsfiddle.net/Jcgja/2/

Answer 1

You need to validate it through java script. Below is the code for java script validation

function CheckFileName() {
        var fileName = document.getElementById("uploadFile").value
        if (fileName == "") {
            alert("Browse to upload a valid File with png extension");
            return false;
        }
        else if (fileName.split(".")[1].toUpperCase() == "PNG")
            return true;
        else {
            alert("File with " + fileName.split(".")[1] + " is invalid. Upload a validfile with png extensions");
            return false;
        }
        return true;
    }