I've coded a php script which uploads CSV files, parse them and update data into a SQL database. Now that this part is done, I've found out this treatment takes a lot of time and I'd like to add a progress bar to monitor the process.
Sadly, I've found out that I should have done some kind of jQuery/JSON call from the main page from the beginning, so I would have the value returned once updated.
In order to not change the whole code, I was trying to retrieve the progression by just calling a javascript function which will printout the php value each 5 seconds. As you can imagine, it didn't work at all. If I'm not wrong, since circa 2012, in php code, no echo is sent while task is running, even using flush(); ob_flush(); etc. Is it any possible workaround? Thanks poy
main page code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../css/bootstrap.min.css">
<script src="../../src/jquery-1.9.1.js"></script>
<script src="../../src/jquery-ui.js"></script>
<script>
$(document).ready(function () {
$('.box').css({ 'display': 'none'});
function updb(){
var progress = '<?= $progress;?>';
$('.progress-bar').css('width',progress+'%');
$('.progress-bar').text(progress+'%');
}
$("#planningupload").submit(function(){
$('.box').removeAttr('style');
$('.progress-bar').text('0%');
setInterval(function(){
updb() // this will run after every 5 seconds
}, 5000);
});
});
</script>
</head>
<body>
<div id="container">
<h1>CSVParser</h1>
<form action="#" id="csvparser" method="post" enctype="multipart/form-data">
<p>Select csv filetype:</p>
<input type="radio" name="plantype" value="fa" required> FA<br>
<input type="radio" name="plantype" value="pi"> Pi<br><br>
<p>Select a planning to upload:</p>
<input type="file" name="csvfile" size="40" />
<input type="hidden" name="upload">
<br />
<input type="submit" class="button" id="upload" name="upload" value="upload" />
</form>
</div>
<div class="box">
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" style="width:0%"> 0% </div>
</div>
</div>
<?php
if (isset($_POST["upload"])) {
$uploaddir = 'csv/';
if ($_POST["plantype"]==="fa") $filename = $uploaddir . 'latestfa.csv';
if ($_POST["plantype"]==="pi") $filename = $uploaddir . 'latestpi.csv';
...
$progress = number_format((($k/$amount)*100), 2, '.', '');
}
?>
</html>
Update 1: Based on your recommendations, I've done the following modifications to the code & created a status.php page which shall return in real time the progress. Sadly, I still get the values updated at the end of the task. Is it any way to get the values as they come, in real time? FYI session_start(); has been added on the very top of each php file.
main file changes :
function updb(){
$.ajax({
url : 'status.php',
dataType : 'json',
success : function (data) {
alert(data.progress);
},
error : function () {
alert("error");
}
})
}
...
$progress = number_format((($k/$amount)*100), 2, '.', '');
$_SESSION['progress'] = $progress;
status.php file :
<?php
session_start();
if (isset($_SESSION['progress'])){
echo json_encode($_SESSION);
} else {
echo "none%";
}
?>
