上传文件到服务器时如何显示进度条？

我找到了一个合适的例子，但它包含随机文件下载数据。

这是我的js和表单代码：

$(function(){
var progressBar = $('#progressbar');
$('#my_form').on('submit', function(e){
    e.preventDefault();
    var $that = $(this),
            formData = new FormData($that.get(0));
    $.ajax({
        url: $that.attr('action'),
        type: $that.attr('method'),
        contentType: false,
        processData: false,
        data: formData,
        dataType: 'json',
        xhr: function(){
            var xhr = $.ajaxSettings.xhr(); // получаем объект XMLHttpRequest
            xhr.upload.addEventListener('progress', function(evt){ // добавляем обработчик события progress (onprogress)
                if (evt.lengthComputable) { // если известно количество байт
                    // высчитываем процент загруженного
                    var percentComplete = Math.ceil(evt.loaded / evt.total * 100);
                    // устанавливаем значение в атрибут value тега progress
                    // и это же значение альтернативным текстом для браузеров, не поддерживающих <progress>
                    progressBar.val(percentComplete).text('Загружено ' + percentComplete + '%');
                }
            }, false);
            return xhr;
        },
        success: function(json){
            if(json){
                $that.after(json);
            }
        }
    });
});
});

表格

<form action="handler.php" method="post" id="my_form" enctype="multipart/form-data">
<p>
<label for="myfile">Файл:</label>
  <input type="file" name="my_file" id="my_file"> 
  <progress id="progressbar" value="0" max="100"></progress>
</p>
<input type="submit" id="submit" value="Отправить">
</form>

处理程序.php

if(isset($_FILES['my_file'])){
$req = false;
// Приведём полученную информацию в удобочитаемый вид
ob_start();
echo '<pre>Данные загруженного файла:<br>'; 
print_r($_FILES['my_file']);
echo '</pre>';
$req = ob_get_contents();
ob_end_clean();
echo json_encode($req); // вернем полученное в ответе
exit;
}

我将示例（上面的链接）中的样式添加到我的代码中，没有任何改变，我的栏看起来像这样：

我想要数字和不同的视图，所以：

我也制作了自己的 html 表单，如示例中所示，但进度条完全消失或显示多次。

请帮助我将示例中的 js 集成到我的表单中，以便它显示真实数据并且看起来正确。

谢谢！