Loading, extracting and improving PHP performance
I need help creating a progress bar for my php download site. I have a sorted download and exctract part, but I need help with a progress bar. I do not know how to do that. Also, is there a maximum file size for upload?
Html
<?php if($message) echo "<p>$message</p>"; ?>
<form enctype="multipart/form-data" method="post" action="">
<label>Choose file (.zip): <input type="file" name="zip_file" /></label>
<br />
<input type="submit" value="Upload" name="submit" value="Upload" />
</form>
PHP
<?php
if($_FILES["zip_file"]["name"]) {
$filename = $_FILES["zip_file"]["name"];
$source = $_FILES["zip_file"]["tmp_name"];
$type = $_FILES["zip_file"]["type"];
$name = explode(".", $filename);
$accepted_types = array(
'application/zip',
'application/x-zip-compressed',
'multipart/x-zip',
'application/x-compressed');
foreach($accepted_types as $mime_type) {
if($mime_type == $type) {
$okay = true;
break;
}
}
$continue = strtolower($name[1]) == 'zip' ? true : false;
if(!$continue) {
$message = "[...] not a .zip file. Please try again.";
}
$target_path = "./".$filename;
if(move_uploaded_file($source, $target_path)) {
$zip = new ZipArchive();
$x = $zip->open($target_path);
if ($x === true) {
$zip->extractTo("./");
$zip->close();
unlink($target_path);
}
$message = "Your .zip file was uploaded and unpacked.";
} else {
$message = "There was a problem with the upload. Please try again.";
}
}
?>
source to share
You can make some changes to fit, but this works pretty well if you want a progress bar. You can add more eventlisteners and do it however you want. Hope this is a good starting point for you.
function uploadFile(){
var file = document.getElementById("zip_file").files[0];
var formdata = new FormData();
formdata.append("zip_file", file);
var ajax = new XMLHttpRequest();
ajax.upload.addEventListener("progress", function(event) { runprogress(event); } , false);
ajax.addEventListener("load", function(event) {uploadcomplete(event); }, false);
//Target your php file.
ajax.open("POST", "upload.php");
ajax.send(formdata);
}
function runprogress(event){
//The progress %, you might want to Math.round(percent)
var percent = (event.loaded / event.total) * 100;
}
function uploadcomplete(event){
//This will = to your php reply.
var AjaxReply=event.target.responseText;
}
source to share
As far as I know, you will have to use JavaScript for this. Send your data through an AJAX call and initialize the progress bar. Over time, animate so that the panel "fills".
Eventually the AJAX call will complete and send a response, after the call is complete, you can finish the animation. This is how I would assume most progress bars work as they usually go up and then stop at about 99% until a message returns it "full status".
Either way, you will have a progress bar represented <div>
for example with a width that will increase over time, or a number will increase, etc ... and you will animate this with JavaScript and / or jQuery. Hope this helps you get started in the right direction.
EDIT
Here's a link to a tutorial outlining the steps required to upload files to the server using AJAX: Uploading files using AJAX
source to share