jQuery Validate image extension case

Question

I am using jquery validate to validate image upload extension. Right now I have something like:

$("#photo").rules("add", {
        accept: "jpg|jpeg|png|"
    });

The problem is that this would only accept if the extension is lower case. I could do

$("#photo").rules("add", {
        accept: "jpg|jpeg|png|JPG|JPEG|PNG"
    });

But I would like this to work even if the extension is jPG or JPg. I tried this regex:

 accept: "/\.(jpe?g|gif|png)$/i"

Don't know if my regex is wrong or if the plugin just doesnt accept regex. Any idea? Thanks!

Answer 1

accept is only for mime types.

You need the extension rule if you want to specify by file extension.

See: http://jqueryvalidation.org/extension-method/

Answer 2

Perhaps you don't need bother jQuery to validate image extention.

If you don't care about case-sensitivity, you just need to use accept attribute of <input> to do it, just like this

<input type="file" name="pic" accept=".png, .jpg">

but this solution has some compatibility limitation, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Browser_compatibility