JQuery Validate Image Upload File Type

Question

I have a JQuery script that validates the upload of avatar images but I need it to prevent the upload of anything other than PNG, JPG & GIF images. Any way of implementing this into the code I have? Here is the code:

$('#addButton').click(function () {
    var avatar = $("#avatarupload").val();
    if(avatar.length < 1) {
        avatarok = 0;
    }
    //ELSE IF FILE TYPE
    else {
        avatarok = 1;
    }
    if(avatarok == 1) {
        $('.formValidation').addClass("sending");
        $("#form").submit();
    }
    else {
        $('.formValidation').addClass("validationError");
    }
    return false;
});

Answer 1

This should check the file extension

var extension = avatar.split('.').pop().toUpperCase();
if (extension!="PNG" && extension!="JPG" && extension!="GIF" && extension!="JPEG"){
    avatarok = 0;
}

So the full code should looks like

$('#addButton').click(function () {
    var avatar = $("#avatarupload").val();
    var extension = avatar.split('.').pop().toUpperCase();
    if(avatar.length < 1) {
        avatarok = 0;
    }
    else if (extension!="PNG" && extension!="JPG" && extension!="GIF" && extension!="JPEG"){
        avatarok = 0;
        alert("invalid extension "+extension);
    }
    else {
        avatarok = 1;
    }
    if(avatarok == 1) {
        $('.formValidation').addClass("sending");
        $("#form").submit();
    }
    else {
        $('.formValidation').addClass("validationError");
    }
    return false;
});

Answer 2

You can try for jquery validate for validation which is having accept :

vCategoryImage:{
   accept: "image/*"
}

Answer 3

As per your requirement the purpose is upload avatar ,so you can check with drop zone open source file upload extension Drop Zone .

Or else you can check with the various plugins available from Jquery.

For Example plugin please check the below links

• Lite Uploader - File type and size validation and more functionality. Lite Uploader
• Resumable JS - Resumable JS

Hope this will be helpful.