Hi all,
today, I’ll show you how you can integrate that progress bar :
http://www.johnboy.com/php-upload-progress-bar/
to your application.
First, make sure you installed APC into your server.
Basically, the flow will be :
-> an id is created for the apc key by the form
-> that id is catched by javascript in order to display a frame which contains the progress bar
-> we use apc_fetch in order to obtain the download’s status
-> we submit that value to the jquery which will handle the progress bar animation
I’ve created two controllers : the first one displays the form, the second one the progress bar.
The progress bar uses the uri routing in order to ask apc the status
Final uri :
http://localhost/fr/docs/user/progress/874d7a1baf6cf26ff405d48d6d41b197
What I changed :
into the form view :
$('#upload_frame').attr('src','<?php echo site_url(); ?>/docs/user/progress/<?php echo $up_id; ?>');You notice that I display the key into an extra segment
Progress view :
if($this->uri->segment(7))
I check the seventh segment created here :
$.get("<?php echo site_url(); ?>/docs/user/progress/<?php echo $this->uri->segment(5); ?>/randval/"+ Math.random(), {Controller (docs/user/) :
function Add_document () {
if($_SESSION['login'] == "") {
redirect(MYACCOUNT, 'location');
}
else {
$this->load->helper('form');
$this->load->view('docs/actions/add', $data);
}
}
function Progress() {
$data['PROGRESS_KEY']= $this->input->post('progress_key');
$this->load->view('docs/progress', $data);
}
View (docs/actions/add) :
<html>
<head><title>Foo</title>
<?php $up_id = md5(uniqid(rand())); ?>
<!--Get jQuery-->
[removed][removed]
<!--display bar only if file is chosen-->
[removed]
$(document).ready(function() {
//show the progress bar only if a file field was clicked
var show_bar = 0;
$('input[type="file"]').click(function(){
show_bar = 1;
});
//show iframe on form submit
$("#form1").submit(function(){
if (show_bar === 1) {
$('#upload_frame').show();
function set () {
$('#upload_frame').attr('src','<?php echo site_url(); ?>/docs/user/progress/<?php echo $up_id; ?>');
}
setTimeout(set);
}
});
});
[removed]
</head>
<body>
<form action="<?php echo site_url(); ?>/docs/actions/upload" method="POST" enctype="multipart/form-data" name="form1" id="form1">
<!--APC hidden field-->
<input type="hidden" name="APC_UPLOAD_PROGRESS" id="progress_key" value="<?php echo $up_id; ?>"/>
<!---->
<input id="file" type="file" name="user_file">
</form>
<!--Include the iframe-->
<iframe id="upload_frame" name="upload_frame" frameborder="0" border="0" src="" scrolling="no" scrollbar="no" > </iframe>
</body>
</html>the progress view
<?php
$url = basename($_SERVER['SCRIPT_FILENAME']);
// Get file upload progress information.
if($this->uri->segment(7)) {
$status = apc_fetch('upload_'.$this->uri->segment(5));
echo $status['current']/$status['total']*100;
die;
}
?>
[removed][removed]
<link href="<?php echo $BASE_URL; ?>style_progress.css" rel="stylesheet" type="text/css" />
[removed]
$(document).ready(function() {
//
setInterval(function()
{
$.get("<?php echo site_url(); ?>/docs/user/progress/<?php echo $this->uri->segment(5); ?>/randval/"+ Math.random(), {
},
function(data) //return information back from jQuery's get request
{
$('#progress_container').fadeIn(100); //fade in progress bar
$('#progress_bar').width(data +"%"); //set width of progress bar based on the $status value (set at the top of this page)
$('#progress_completed').html(parseInt(data) +"%"); //display the % completed within the progress bar
}
)},500); //Interval is set at 500 milliseconds (the progress bar will refresh every .5 seconds)
});
[removed]
<body id="progress_back">
<!--Progress bar divs-->
<div id="progress_container">
<div id="progress_bar">
<div id="progress_completed"></div>
</div>
</div>
<div id="loader"></div>
<!---->
</body>
Final result 😊
http://img193.imageshack.us/img193/2290/prout20100909at84750pm.jpg
