PHP progress bar on upload
I wrote PHP code to back up a site and I compress the whole site and let the user download it on their machine. The compress and download works great, but since this is a site backup, it takes a while to zip the download and upload, and I don't want the user to navigate to any other page while the zip is in progress. Is there a way I can show a progress bar when zip / download is running? I have searched on google, but it seems that you can show a progress bar on loading, but not during loading.
I created a temporary file before the zip actually took place and checked if the file exists. My logic was that if the file exists then a modal dialog is displayed in JS with the message "please wait ..", but since the download uses a header, I can't basically push anything before downloading.
Any suggestions?
source to share
You can fake progress bar using gif animation ...
<script type="text/javascript">
function SubmitForm() {
StartProgress();
var backup = document.getElementById("backup");
backup.submit();
}
function StartProgress() {
ProgressImage = document.getElementById('progress_image');
document.getElementById("progress").style.display = "block";
setTimeout("ProgressImage.src = ProgressImage.src", 100);
return true;
}
</script>
<form id="backup" action="backup.php" method="post">
<input class="backup" type="submit" name="backup" onclick="SubmitForm()" value="BackUp">
</form>
<div style="display: none" id="progress"><img id="progress_image" src="css/progress_bar.gif" alt="BackUp in progress..."></div>
You can see my work here ... click the BackUp button to check it out ...
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed);
.box {
padding: 20px;
margin: 0 auto;
display: inline-block;
vertical-align: middle;
text-align: center;
border: #C0C0C0 3px solid;
border-radius: 5px;
min-width: 270px;
height: 150px;
font-family: 'Roboto Condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 17px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
background-color: #006699;
}
.backup {
padding: 10px;
margin: 0 auto;
font-family: 'Roboto Condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 17px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
background-color: darkviolet;
color: black;
border-radius: 5px;
border: #C0C0C0 3px solid;
box-shadow: inset -5px 5px 5px rgba(255, 255, 255, 0.15), inset 5px -5px 5px rgba(0, 0, 0, 0.15);
cursor: pointer;
}
#progress {
padding: 20px;
}
.cleardiv {
clear: both;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>BackUp Demo Progress Bar</title>
<script type="text/javascript">
function SubmitForm() {
StartProgress();
var backup = document.getElementById("backup");
backup.submit();
}
function StartProgress() {
ProgressImage = document.getElementById('progress_image');
document.getElementById("progress").style.display = "block";
setTimeout("ProgressImage.src = ProgressImage.src", 100);
return true;
}
</script>
</head>
<body>
<div class="box">
<form id="backup" action="backup.php" method="post">
<input class="backup" type="submit" name="backup" onclick="SubmitForm()" value="BackUp">
</form>
<div style="display: none" id="progress">
<img id="progress_image" src="http://www.1sttry.de/files/specials/progressbars/ProgressBar23466666.gif" alt="BackUp in progress...">
</div>
<div class="cleardiv"></div>
</div>
</body>
</html>
Then search for the gif animation to display the progress bar ...
Hope this helps :)
source to share