没有jquery的文件上传进度条

Question

我们正在尝试添加文件上传进度条而不使用ajax和jquery。但是没有在谷歌上找到有用的教程。

这是我们的基本代码

<form enctype="multipart/form-data" action="upload.php" method="POST">
<input name="name" type="text" />
<input name="user_type" type="hidden" />
<input name="address" type="text" />
<!-- more fields -->
<input name="uploaded" type="file" />
<input type="submit" value="Upload" />
</form>

在upload.php中，我们正在进行大量处理，并根据用户输入重定向到多个页面。

当我们使用jquery时，控件不会是upload.php而不是重定向到页面。

如何在不使用jquery的情况下添加进度条？

这是我们尝试过的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) {
     bar.width("100%");
    percent.html("100%");
    status.html(xhr.responseText);
    }
});

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

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