使用bootstrapValidator工作的表单上传与图像文件不起作用

Question

我正在尝试在我们的网站上制作一个体育锦标赛的球员注册表格。我正在使用bootstrap和jquery来验证表单，但我似乎无法将图像上传到服务器并将文件移动到目录。它上传表单数据但不上传图像。让我疯了，做了大量的搜索但没有用。

这是我的jquery代码和我的html页面。

任何帮助都将不胜感激。

$(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>