php and jquery progress bar - php

Question

I have one form and in that form i have input type file to upload zip files i upload zip file using that form and than it goes to zip extract php file but i want to show loader till the file extract.How can i do using php or jquery?
<form enctype="multipart/form-data" method="post" action="zip_upload.php">
<label>Upload Zip File: </label> <input type="file" name="zip_file">
<input type="submit" name="submit" value="Upload" class="upload" id="submitzip"> <br><br>
</form>

Answer 1

Showing a percentage based progress bar is tricky work. You're much better off displaying a loading status or a spinning icon if your knowledge on this subject is limited.
Not the prettiest of methods but has worked wonders for me and many others in the past.
CSS:
#uploadFrame {
height:1px;
width:1px;
visibility:hidden;
}
HTML:
// hide this on your page somewhere. It's only 1x1 pixels, so should be simple.
<iframe src="zip_upload.php" name="uploadFrame" id="uploadFrame"></iframe>
// your upload form
<form enctype="multipart/form-data" method="post" action="zip_upload.php" target="uploadFrame">
// form content
</form>
jQuery:
$(form).submit(function() {
$('#loading-spinner').show();
});
$("#uploadFrame").load(function() {
$('#loading-spinner').hide();
});
When the form is submitted, a loading icon is displayed, and when the upload and extraction process has finished (iFrame loaded), the loading icon disappears. This all happens without reloading the page.
The bonus of using this is, if modified slightly (convert jQuery to Javascript) you don't need any external libraries or plugins to use it. Also, it is very simple and understandable.
ANOTHER OPTION --------------------------------------------
A bit more advanced and inclusion of jQuery library & a plugin is required, but has the percentage feature.
Check out http://malsup.com/jquery/form/#file-upload for documentation and full spec and here for demo: http://malsup.com/jquery/form/progress.html.
Here is the code:
<form action="zip-upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="zip_file">
<input type="submit" value="Upload">
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script>
(function() {
var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');
$('form').ajaxForm({
beforeSend: function() {
status.empty();
var percentVal = '0%';
bar.width(percentVal)
percent.html(percentVal);
},
uploadProgress: function(event, position, total, percentComplete) {
var percentVal = percentComplete + '%';
bar.width(percentVal)
percent.html(percentVal);
},
success: function() {
var percentVal = '100%';
bar.width(percentVal)
percent.html(percentVal);
},
complete: function(xhr) {
status.html(xhr.responseText);
}
});
})();
</script>
And on your PHP page:
<?php
$target_path = "uploads/";
$target_path = $target_path . basename( $_FILES['zip_file']['name']);
if(move_uploaded_file($_FILES['zip_file']['tmp_name'], $target_path)) {
echo "The file ". basename( $_FILES['zip_file']['name']).
" has been uploaded";
} else{
echo "There was an error uploading the file, please try again!";
}
?>

Answer 2

You can use jQuery UI. Here you can check it http://jqueryui.com/progressbar/#default