<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ZIP Extract Progress (Ajax)</title>
<style>
#progressBar {
width: 100%;
background-color: #eee;
border: 1px solid #ccc;
height: 25px;
margin-top: 10px;
}
#progressBar div {
height: 100%;
width: 0%;
background-color: #4caf50;
text-align: center;
color: white;
line-height: 25px;
}
#log {
margin-top: 15px;
font-family: monospace;
font-size: 14px;
}
</style>
<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
</head>
<body>
<h2>ZIP Extract Progress (Ajax)</h2>
<button type="button" id="startBtn">Start Extract</button>
<div id="progressBar"><div>0%</div></div>
<div id="log"></div>
<script>
function updateProgress(percent, entry) {
const bar = $("#progressBar div");
bar.css("width", percent + "%").text(percent + "%");
if (entry && entry !== "__COMPLETE__" && entry !== "__EMPTY__") {
$("#log").append("Extracted: " + entry + "<br>");
}
if (entry === "__EMPTY__") {
$("#log").append("<em>No files found in archive.</em><br>");
}
if (entry === "__COMPLETE__") {
$("#log").append("<strong>Completed!</strong><br>");
}
}
function zipProgress() {
$.getJSON("extractWithProgress.php", function(data) {
updateProgress(data.percent, data.entry);
if (data.entry !== "__COMPLETE__" && data.entry !== "__EMPTY__") {
setTimeout(zipProgress, 1000);
}
});
}
$("#startBtn").on("click", function() {
$("#log").empty();
updateProgress(0, "");
zipProgress();
});
</script>
</body>
</html>
|
Download
