I have a problem with load bar. I have a file named site.php, load.js and file.php my system read an excel file, and extract the data in a array, I want to display the progress but of the reading row excel file, not of the upload of the excel file.
my site.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="css/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.js">
</script>
</head>
<body>
<div class="progress" style="width:90%; margin:20px auto;">
<div id="barra_progreso" class="progress-bar progress-bar-danger progress-bar-striped active" role="progressbar" aria-valuenow="1" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
<span class="sr-only"></span>
</div>
</div>
</body>
</html>
load.js
var datos = new FormData();
datos.append('excel', file);
$.ajax({
url: 'file.php',
type: 'POST',
data: datos,
processData: false,
contentType: false
}).done(function(r) {
$("#msgOK").html(r);
}
file.php
$cant = $excel->getRow() + 1;
sleep(1);
echo "<script type='text/javascript'>
$(function() {
var progressbar = $('#barra_progreso'),
**max = 25**,
value = 0;
var loading = function() {
value += 1;
addValue = progressbar.val(value);
if (value <= (1 / 3 * max)) {
progressbar.addClass('progress-bar-danger')
} else if (value <= (2 / 3 * max)) {
progressbar.removeClass(' progress-bar-danger ');
progressbar.addClass('progress-bar-warning')
} else {
progressbar.removeClass('progress-bar-warning');
progressbar.addClass('progress-bar-success')
}
var porc = (value / max) * 100;
var valor = parseFloat(Math.round(porc * 100) / 100).toFixed(2);
progressbar.css({
width: porc + '%'
});
progressbar.html(valor + '%');
if (value == max) {
clearInterval(animate);
alert('carga completada');
}
};
var animate = setInterval(function() {
loading();
}, 1000);
});
</script>";
flush();
ob_flush();
Every function worked good, but the load bar displayed after the reading of the excel file, I know that behavior is due the ajax.done, I print the max rownum of my excel file and with this value I work in the load bar. Any way for fix this problem ?
What you need to do is have two processes run at the same time.
One that's uploading the file and extracting the data, the other to check what the status of that action is. So you've probably got the first one done.
To do the second one you will need to record the status of the upload, into the session is probably easiest as long as it won't conflict with anything else. Then with AJAX you set a timer to continuously call a PHP script which gets the status from the session and return it, it should be a very short script.
Then you use this retrieved data to update your progress bar.