How to display progress bar when uploading images In PHP - php

Question

This is my code:
$(function(){
var btnUpload=$('#browse');
var adinfoid=$('#adinfoid').val();
new AjaxUpload(btnUpload, {
action: '<?php echo base_url()?>index.php/post/upload_editmainimage/'+adinfoid,
name: 'uploadfile',
onSubmit: function(file, ext){
$("#progressid").css("display","block");
if (! (ext && /^(jpg|png|jpeg|gif|JPG|PNG|JPEG|GIF)$/.test(ext))){
$("#mainphotoerror").html('Only JPG, PNG, GIF, files are allowed');
$("#mainphotoerror").css('display','block');
return false;
}
},
onComplete: function(file, response){ //alert(response);
if(response){
/*$(".main_image").html('');
$(".main_image").html(response);*/
$("#progressid").css("display","none");
$("#image"+<?php echo $mainimage->intphotoid; ?>).css('display','block');
$("#imagemainicon"+<?php echo $mainimage->intphotoid; ?>).css('display','block');
$("#mainimageicon").attr("src",response);
$("#mainimageicon").attr("width",55);
$("#mainimageicon").attr("height",55);
$("#mainimageicon1").attr("src",response);
}else{
alert("error");
}
}
});
});
<input type="button" id="browse" class="browse_media" value="Browse">
<div id="progressid" class="displayNone">
<img src="//s3.amazonaws.com/s3.racingjunk.com/102/images/procesing.gif" width="117" height="20" />
Uploading.....
</div>
When I click on the browse button I need to show a progress bar for 5 minutes. After 5 minutes the progress bar will hide or not be shown. After the progress bar hides the image will then display.
How can I do this? Is this possible?

Answer 1

Try this
http://www.9lessons.info/2012/04/file-upload-progress-bar-with-jquery.html
i haven't tried it myself but this night work

Answer 2

You have to do like this:--
<div id="popup1" class="popup_block">
<?php echo $this->Html->image('ajax-loader2.gif'); ?>
<h4>Processing Please Wait...! </h4>
</div>
In script:-
Using Jquery
//Fade in Background
jQuery('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
jQuery('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer
var popID = 'popup1';
//var popWidth = 500;
//Fade in the Popup and add close button
jQuery('#' + popID).css({ 'width': '250' });
for time you can give in Your Jquery or do like this:--
window.setInterval(function() {
// this will execute every 5 minutes => show the alert here
}, 300000);

Answer 3

You cannot achieve that using the code you have shared. You see, you need to know how much data has been sent to the server so that you can show actual progress.
How People do it?
1. They used third party plugins like java Applet or Flash to upload files
2. They use an animated picture to show progress while the file is being sent (not actual progress).
3. They use HTML 5.
For real time feedback on how much file has been sent to the server you will need either 3rd party plugin (if you are on an older browser) or HTML5 XMLHttpRequest Object
See html5 file upload with upload status/Progress bar.