Не работает progressbar bootstrap

Проблема вот в чем. Заливаю файл на сервер через форму:

   <form action="/upload.php" method="post" id="my_form" enctype="multipart/form-data">
      <p>
        <label for="myfile">Файл:</label>
        <input type="file" name="file" id="file">
      <div class="progress">
        <div id="progressBar" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
          0%
        </div>
      </div>
      </p>
      <input type="submit" id="submit" value="Отправить">
    </form>

Ajax + Bootstrap для индикатора загрузки

$('my_form').on('submit', function(event) {

        event.preventDefault();

        var formData = new FormData($('my_form')[0]);

        $.ajax({
            xhr : function() {
                var xhr = new window.XMLHttpRequest();

Php для отбрасывания лишних типов файлов, и для отображения ряда ошибок

if (!empty($success)) {
echo '<p>' . $success . '</p>';
} else {

echo '<p>' . $error . '</p>';
}

Проблема: Если указано my_form, то progressbar не работает, файл загружается удачно.

$('my_form').on('submit', function(event) {

Если указано #my_form, то progressbar работает, но файл не загружается.

$('#my_form').on('submit', function(event) {

Прошу помощи!