jQuery How to prevent form submit in this case

Question

I have this image upload form that I check on 'change' for file type and file size.

If a file is above a certain size or if its not an image, it'll alert the user. Problem I'm having is, how do I prevent the form from being submitted when this is the case. If I were to click the upload button the file submits. Actually it should not until the file is a certain size and type.

Can you help me set this right? I've tried, but I just cannot figure out where and what to do.

<form enctype="multipart/form-data" method="">
        <input type="file" name="file" class="file"><br>
        <input type="submit" value="Upload File to Server">
    </form>

Script (this is done using the jquery form plugin)

<script>
$(document).ready(function() {

$(':file').change(function(){
            var file = this.files[0];
            name = file.name;
            size = file.size;
            type = file.type;

            if(file.name.length < 1) {

            }
            else if(file.size > 1000000) {
                alert("File is to big");
            }
            else if(file.type != 'image/png' && file.type != 'image/jpg' && !file.type != 'image/gif' && file.type != 'image/jpeg' ) {
                alert("File doesnt match png, jpg or gif");
            }
            else { 

            $(':submit').click(function(){
                var bar = $('.bar');
                var percent = $('.percent');
                var status = $('#status');

                $('form').ajaxForm({
                    url:"upload_file.php",
                    type:"post",
                    dataType:"json",
                    target:"#status",

                    beforeSend: function() {
                        status.empty();
                        var percentVal = '0%';
                        bar.width(percentVal)
                        percent.html(percentVal);
                    },
                    uploadProgress: function(event, position, total, percentComplete) {
                        var percentVal = percentComplete + '%';
                        bar.width(percentVal)
                        percent.html(percentVal);
                    },
                    complete: function(xhr) {
                        status.html(xhr.responseText);
                        $("#status").html("HIIII Gais");

                    }
                });

                });
}
});             
    });       
</script>

Answer 1

You can set a variable outside the two functions and set it to true if its valid.. If it's valid then send a request , otherwise prevent default..

$(document).ready(function() {

    var isValid = false;

    $(':file').change(function() {

        isValid = false;

        var file = this.files[0];
        name = file.name;
        size = file.size;
        type = file.type;

        if (file.name.length < 1) {

        } else if (file.size > 1000000) {
            alert("File is to big");
        } else if (file.type != 'image/png' && file.type != 'image/jpg' && !file.type != 'image/gif' && file.type != 'image/jpeg') {
            alert("File doesnt match png, jpg or gif");
        } else {
            isValid = true;

        }
    });

    $(':submit').click(function(e) {
        if (!isValid) {
            e.preventDefault();
        }
        else {
            var bar = $('.bar');
            var percent = $('.percent');
            var status = $('#status');

            $('form').ajaxForm({
                url: "upload_file.php",
                type: "post",
                dataType: "json",
                target: "#status",

                beforeSend: function() {
                    status.empty();
                    var percentVal = '0%';
                    bar.width(percentVal)
                    percent.html(percentVal);
                },
                uploadProgress: function(event, position, total, percentComplete) {
                    var percentVal = percentComplete + '%';
                    bar.width(percentVal)
                    percent.html(percentVal);
                },
                complete: function(xhr) {
                    status.html(xhr.responseText);
                    $("#status").html("HIIII Gais");

                }
            });
        }

    });
});​

Answer 2

You can't get more than the filename from the file input element with javascript. You need to do the filesize, mime type, etc checks on the server side.