Take the 2-minute tour ×


<input type="file" name="group_documents_file" id="group_documents_file" class="group-documents-file" />

Rule: The file to upload must have an extension JPEG, GIF or PNG, otherwise an alert must be displayed.

share|improve this question
add comment

4 Answers

You simply need to pull the value of the element:

var fileName = $('#group_document_file').val();

var extension = fileName.slice('.')[fileName.slice('.').length - 1].toLowerCase();

if(extension == 'jpeg' || extension == 'gif' || extension == 'png')
   // Show Validated Image
   alert('Choose a supported image format');
share|improve this answer
No need to double slice when you can use regEx. See my answer. –  Joseph Silber Aug 12 '11 at 14:57
If you have a problem and decide to solve it with regular expressions, now you have two problems. =D –  Tejs Aug 12 '11 at 15:03
And why is that? IMHO, the regEx way is much cleaner... –  Joseph Silber Aug 12 '11 at 15:04
It's an old programmer's saying, not a slight; first because you need to construct a regex that will actually solve your problem, and then second because the readability of your code is lessened when you have to mentally parse the regex to figure out what the code is doing. –  Tejs Aug 12 '11 at 15:05
Again, in my HUMBLE opinion, it really depends on the situation. When coming up with a crazy complex RegEx to a simple problem, you're right. But in this particular situation, the regex is the cleaner AND more legible one of the two. –  Joseph Silber Aug 12 '11 at 15:08
show 1 more comment

See here: get the filename through javascript on how to get the filename:

var extension = $('#group_documents_file').val().match(/[^.]+$/).toLowerCase();

This should get you anything after the period in the filename.


If you don't want to use a regEx, I would recommend using split, with pop:

var extension = $('#group_documents_file').val().split('.').pop().toLowerCase();

Then, to check for allowed extensions, do the following:

    // correct file type...
} else {
    // incorrect file type...
share|improve this answer
add comment

The following gets the extension of the file:


    var value = this.value;
    val = value.split("\\");
    var file = (val[val.length - 1]).split('.');
    var ext = file[file.length - 1];

Fiddle: http://jsfiddle.net/maniator/gveqX/

share|improve this answer
add comment

Try this

var fName = $('#group_document_file').val();

var validExtns ["jpg", "gif", "png"];

var extn = fName.slice('.')[fName.slice('.').length - 1];

if($.inArray(extn.toLowerCase(), validExtns) != -1){
   // Show Validated Image
   alert('Invalid image format');
share|improve this answer
add comment

Your Answer


