注意： 这个问题与jQuery 表单插件有关。如果您正在寻找纯 jQuery
解决方案，请从这里开始。没有适用于所有浏览器的整体 jQuery
解决方案。所以你必须使用插件。我正在使用dropzone.js，它可以轻松地回退旧浏览器。您喜欢哪个插件取决于您的需求。那里有很多很好的比较帖子。

从例子：

jQuery：

$(function() {

    var bar = $('.bar');
    var percent = $('.percent');
    var status = $('#status');

    $('form').ajaxForm({
        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);
        }
    });
});

html:

<form action="file-echo2.php" method="post" enctype="multipart/form-data">
    <input type="file" name="myfile"><br>
    <input type="submit" value="Upload File to Server">
</form>

<div class="progress">
    <div class="bar"></div >
    <div class="percent">0%</div >
</div>

<div id="status"></div>

您必须使用 CSS 设置进度条的样式…