Question

I use this jQuery code to validate a file upload event. It’s successful. But When I click the submit button I don’t want that wrong file to be attached and passed to PHP.

How can I stop the file being sent to server if the file extension is wrong? I want do it using jQuery.

report_file – input field with the type of file

var ext = $('#report_file').val().split('.').pop().toLowerCase();
if($.inArray(ext, ['doc','docx','gif','jpg','png','xls','xlsx','jpeg','pdf']) == -1) {
    alert('invalid extension!');        
}

Thanks

Answer 1

Try using event.preventDefault() on submit function

$('#form').submit(function(e) {

 var ext = $('#report_file').val().split('.').pop().toLowerCase();
if($.inArray(ext, ['doc','docx','gif','jpg','png','xls','xlsx','jpeg','pdf']) == -1) {
    alert('invalid extension!');  
e.preventDefault();      
}
});

This will prevent the form to submit when invalid extension find.Hope it helps..

EDIT:
Check this fiddle jsfiddle.net/2yQZY