file upload progress bar without jquery

Question

We are trying to add file upload progress bar without using ajax and jquery. But not find useful tutorial on google.

This is our basic code

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

In upload.php we are doing lots of processing and redirect to several pages as per user input.

When we use jquery then control is not going to upload.php and not redirecting to pages.

How we can add progress bar without using jquery?

Here is jquery code which we tried

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

Answer 1

Your best bet is probably to have a separate PHP file like process-upload.php that processes the file upload and saves any variables you want to the $_SESSION then you can do something like this:

<form enctype="multipart/form-data" action="process-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>
  <div class="progress">
    <div class="bar"></div >
    <div class="percent">0%</div >
</div>

And the javascript:

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);
    },
    success: function() {
        var percentVal = '100%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    complete: function() {
        window.location.replace("upload.php")
    }
});

Then you can retrieve your variables from $_SESSION on upload.php