How to display progress bar when uploading images In 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?

You have asked for 2 different things -> "Here i want to display the progress bar when uploading after uploading it would not displayed" ... then "I want to display the bar at 5 minutes after the uploading will over" (spelling corrections mine) .... what are you trying to do .... ???? — Manse
– Manse, Commented May 17, 2012 at 9:04

Abhishek Bhatia · Accepted Answer · 2012-05-17 09:04:21Z

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

FrontEnd Expert · Accepted Answer · 2012-05-17 09:16:29Z

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);

U.P · Accepted Answer · 2012-05-17 09:15:37Z

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.

Collectives™ on Stack Overflow

How to display progress bar when uploading images In PHP

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related