2

HTML:

<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.

Four
  • 900
  • 1
  • 10
  • 18
Houssem Eddine Guemari
  • 21
  • 1
  • 6

4 Answers4

1

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
else
   alert('Choose a supported image format');
Tejs
  • 40,736
  • 10
  • 68
  • 86
  • 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
  • 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
  • At least use "pop" instead of "length - 1". See my answer. – Joseph Silber Aug 14 '11 at 06:57
  • to work need to use this syntax: var extension = fileName.split('.')[fileName.split('.').length - 1].toLowerCase(); – r1si Mar 30 '16 at 14:36
1

See here: get the filename of a fileupload in a document through javascript on how to get the filename:

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

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

EDIT:

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:

if ( ~$.inArray(extension, ['jpg', 'jpeg', 'gif', 'png']) ) {
    // correct file type...
} else {
    // incorrect file type...
}
Community
  • 1
  • 1
Joseph Silber
  • 214,931
  • 59
  • 362
  • 292
  • Hi Joseph, the first solution doesn't work, you need to add .pop() after regEx :) var extension = $('#group_documents_file').val().match(/[^.]+$/).pop().toLowerCase(); – minux Feb 15 '16 at 10:10
0

The following gets the extension of the file:

JS:

$('#group_documents_file').change(function(){
    var value = this.value;
    val = value.split("\\");
    var file = (val[val.length - 1]).split('.');
    var ext = file[file.length - 1];
    alert(ext);
})

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

Naftali
  • 144,921
  • 39
  • 244
  • 303
0

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
}
else{
   alert('Invalid image format');
}
ShankarSangoli
  • 69,612
  • 13
  • 93
  • 124