A Simple PHP Upload Progress Bar

this is a simple upload file form that uses Apc.

it has a lot of features like

• Easy to modify with CSS
• Simple integration
• Uses jQuery for callbacks
• No flash 

Source files

Upload.php

<?php 
//get unique id
$up_id = uniqid(); 
?>

<?php

//process the forms and upload the files
if ($_POST) {

//specify folder for file upload
$folder = "tmp/"; 

//specify redirect URL
$redirect = "upload.php?success";

//upload the file
move_uploaded_file($_FILES["file"]["tmp_name"], "$folder" . $_FILES["file"]["name"]);

//do whatever else needs to be done (insert information into database, etc...)

//redirect user
header('Location: '.$redirect); die;
}
//

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Upload your file</title>

<!--Progress Bar and iframe Styling-->
<link href="style_progress.css" rel="stylesheet" type="text/css" />

<!--Get jQuery-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.js" type="text/javascript"></script>

<!--display bar only if file is chosen-->
<script>

$(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','upload_frame.php?up_id=<?php echo $up_id; ?>');
}
setTimeout(set);
 }
    });
//

});

</script>

</head>

<body>
<h1>Upload your file </h1>

<div>
  <?php if (isset($_GET['success'])) { ?>
  <span class="notice">Your file has been uploaded.</span>
  <?php } ?>
  <form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
    Name<br />
    <input name="name" type="text" id="name"/>
    <br />
    <br />
    Your email address <br />
    <input name="email" type="text" id="email" size="35" />
    <br />
    <br />
    Choose a file to upload<br />

<!--APC hidden field-->
    <input type="hidden" name="APC_UPLOAD_PROGRESS" id="progress_key" value="<?php echo $up_id; ?>"/>
<!---->

    <input name="file" type="file" id="file" size="30"/>

<!--Include the iframe-->
    <br />
    <iframe id="upload_frame" name="upload_frame" frameborder="0" border="0" src="" scrolling="no" scrollbar="no" > </iframe>
    <br />
<!---->

    <input name="Submit" type="submit" id="submit" value="Submit" />
  </form>
  </div>

</body>

</html> 

upload_frame.php

<?php

$url = basename($_SERVER['SCRIPT_FILENAME']);

//Get file upload progress information.
if(isset($_GET['progress_key'])) {
    $status = apc_fetch('upload_'.$_GET['progress_key']);
    echo $status['current']/$status['total']*100;
    die;
}
//

?>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.js" type="text/javascript"></script>
<link href="style_progress.css" rel="stylesheet" type="text/css" />

<script>
$(document).ready(function() { 
//

    setInterval(function() 
        {
    $.get("<?php echo $url; ?>?progress_key=<?php echo $_GET['up_id']; ?>&randval="+ Math.random(), { 
        //get request to the current URL (upload_frame.php) which calls the code at the top of the page.  It checks the file's progress based on the file id "progress_key=" and returns the value with the function below:
    },
        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)

});


</script>

<body style="margin:0px">
<!--Progress bar divs-->
<div id="progress_container">
<div id="progress_bar">
<div id="progress_completed"></div>
</div>
</div>
<!---->
</body>

Style_Progress.css

/*iframe*/
#upload_frame {
 border:0px;
 height:40px;
 width:400px;
 display:none;
}

#progress_container {
 width: 300px; 
 height: 30px; 
 border: 1px solid #CCCCCC; 
 background-color:#EBEBEB;
 display: block; 
 margin:5px 0px -15px 0px;
}

#progress_bar {
 position: relative; 
 height: 30px; 
 background-color: #F3631C; 
 width: 0%; 
 z-index:10; 
}

#progress_completed {
 font-size:16px; 
 z-index:40; 
 line-height:30px; 
 padding-left:4px; 
 color:#FFFFFF;
}

Server Requirements

• PHP 5.2 or greater
  
  
• APC
  Make sure you have APC installed on your server. It won't work without it. It's easy to install, so if you don't have root acces to your server, ask your hosting provider to take care of it for you.
  Installation instructions: Linux | Windows
  
  Important: Make sure to include apc.rfc1867 = on in your php.ini file after APC is installed. Your php.ini file should be located at /etc/php.ini.