A Simple PHP File Upload Progress Bar

#A Simple PHP Upload Progress Bar

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

Comments

Post a Comment