Form Upload with image file using bootstrapValidator not working

Question

I'm trying to make a player registration form on our site for a sports tournament. I'm using bootstrap and jquery to validate the form but I can't seem to get the image uploading to server and move the file to the directory. It uploads the form data but not the image. Driving me nuts, done plenty of searches but no avail.

here is my jquery code and my html page.

Any help would be appreciated.

$(document).ready(function() {
  $('#contact_form').bootstrapValidator({
    // To use feedback icons, ensure that you use Bootstrap v3.1.0 or later
    feedbackIcons: {
      valid: 'glyphicon glyphicon-ok',
      invalid: 'glyphicon glyphicon-remove',
      validating: 'glyphicon glyphicon-refresh'
    },
    submitHandler: function(validator, form, submitButton) {
      $('#success_message').slideDown({
        opacity: "show"
      }, "slow") // Do something ...
      $('#contact_form').data('bootstrapValidator').resetForm();

      var bv = form.data('bootstrapValidator');
      // Use Ajax to submit form data
      $.post(form.attr('action'), form.serialize(), function(result) {
        console.log(result);
      }, 'json');
    },
    fields: {
      first_name: {
        validators: {
          stringLength: {
            min: 2,
          },
          notEmpty: {
            message: 'Please supply your first name'
          }
        }
      },
      last_name: {
        validators: {
          stringLength: {
            min: 2,
          },
          notEmpty: {
            message: 'Please supply your last name'
          }
        }
      },
      email: {
        validators: {
          notEmpty: {
            message: 'Please supply your email address'
          },
          emailAddress: {
            message: 'Please supply a valid email address'
          }
        }
      },
      phone: {
        validators: {
          notEmpty: {
            message: 'Please supply your phone number'
          },
          phone: {
            country: 'US',
            message: 'Please supply a vaild phone number with area code'
          }
        }
      },
      address: {
        validators: {
          stringLength: {
            min: 8,
          },
          notEmpty: {
            message: 'Please supply your street address'
          }
        }
      },
      city: {
        validators: {
          stringLength: {
            min: 4,
          },
          notEmpty: {
            message: 'Please supply your city'
          }
        }
      },
      state: {
        validators: {
          notEmpty: {
            message: 'Please select your state'
          }
        }
      },
      zip: {
        validators: {
          notEmpty: {
            message: 'Please supply your zip code'
          },
          zipCode: {
            country: 'US',
            message: 'Please supply a vaild zip code'
          }
        }
      },
      comment: {
        validators: {
          stringLength: {
            min: 10,
            max: 200,
            message: 'Please enter at least 10 characters and no more than 200'
          },
          notEmpty: {
            message: 'Please supply a description of your project'
          }
        }
      }
    }
  })

});

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      $('#blah')
        .attr('src', e.target.result)
        .height(200);
    };

    reader.readAsDataURL(input.files[0]);
  }
}

<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js'>
</script>
<!-- Page Content -->
<div class="container">
  <form class="well form-horizontal" action="UploadForm.php" method="post" id="contact_form" enctype="multipart/form-data">

    <fieldset>
      <div class="form-group">
        <label class="col-md-4 control-label">First Name</label>
        <div class="col-md-4 inputGroupContainer">
          <div class="input-group">
            <span class="input-group-addon">
                        <i class="glyphicon glyphicon-user"></i></span>
            <input name="firstname" placeholder="firstname" class="form-control" type="text">
          </div>
        </div>
      </div>

      <!-- more input vari -->

      <div class="form-group">
        <div class="col-md-4 selectContainer">
          <input type="file" id="imgfile" name="player_image" onchange="readURL(this);" required>
        </div>
        <div class="col-md-4 selectContainer">
          <img src="images/DefaultImage.png" width="200" height="200" alt="" />
          <figcaption>Example</figcaption>
        </div>
        <div class="col-md-4 selectContainer">
          <img id="blah" src="#" alt="your image will appear here" />
        </div>
      </div>

      <div class="alert alert-success" role="alert" id="success_message">Success
        <em class="glyphicon glyphicon-thumbs-up"></em> Thanks for contacting us, we will get back to you shortly.
      </div>

      <div class="form-group">
        <label class="col-md-4 control-label"></label>
        <div class="col-md-4">
          <button type="reset" class="btn btn-default">Reset 
                    <span class="glyphicon glyphicon-send"></span></button>
        </div>
      </div>

      <div class="form-group">
        <label class="col-md-4 control-label"></label>
        <div class="col-md-4">
          <button type="submit" name="submit" class="btn btn-success">
                      Send <span class="glyphicon glyphicon-send">
                    </span>
                    </button>
        </div>
      </div>



    </fieldset>
  </form>