Docstoc

up

Document Sample
up Powered By Docstoc
					               upload progress bar with PHP and Jquery

We received many tutorial requests from readers that asked how to create file upload progress bar
with PHP and Jquery. In this post Arun Kumar Sekar had developed few lines of code using PHP APC
library, it is very simple getting the server file upload process every few second and increasing the bar
color using jquery css property. Just take a look at this demo.



File Upload Progress Bar



Download Script        Live Demo



Developer

Arun Kumar Shekar

Arun Kumar Sekar

Engineer

Chennai, INDIA



Email : arunfairy[at]hotmail.com

facebook

twitter



To run this script you have to install PHP apc library extension or for PHP 5.4 not required, just follow
the steps to enable the extension. For web page design we implemented with bootstrap CSS library for
any information check my previous post Bootstrap Tutorial



Windows APC Installation
Follow this link Click Here

In php.ini include apc.rfc1867 = on



Linuk APC Installation

Follow this Link Click Here

In php.ini include apc.rfc1867 = on

php.ini located in /etc/php.ini



get_progress.php

Contains PHP code it identifies file upload status from server process.

<?php

session_start();

error_reporting(0);

/*

// For PHP 5.4 users

$progress_key = ini_get("session.upload_progress.prefix")."uploadImage"; // uploadImage is a Form
name

$current = $_SESSION[$progress_key]["bytes_processed"];

$total = $_SESSION[$progress_key]["content_length"];

echo $current < $total ? ceil($current / $total * 100) : 100;

*/

// For PHP 5.2+ php_apc.dll or php_apc.so holder

if(isset($_GET['progress_key']) and !empty($_GET['progress_key'])){

$status = apc_fetch('upload_'.$_GET['progress_key']);

        echo $status['current']/$status['total']*100;

exit;
}

?>



index.php

General form file upload with PHP. You have to include validation rules, please check my previous post
for help.

<?php

$uiq = uniqid();

$image_folder = "uploads/";

$uploaded = false;



if(isset($_POST['upload_image'])){

if($_FILES['userImage']['error'] == 0 ){

$up = move_uploaded_file($_FILES['userImage']['tmp_name'],
$image_folder.$_FILES['userImage']['name']);

if($up){

$uploaded = true;

}

}

}

?>

<form name="uploadImage" id="uploadImage" enctype="multipart/form-data"
action="index.php?progress=<?php echo($uiq)?>" method="post" class="well">

<label>Upload File</label>

<input type="file" name="userImage" id="userImage" />

<span class="badge badge-info" style="display:none;">0%</span>

<input type="submit" class="btn btn-success" name="upload_image" id="upload_image"
value="UPLOAD FILE" />

<div class="progress" style="display:none;"><div class="bar" style="width:0%;"></div></div>

</form>



JavaScript File

Contains simple javascript implemented with Jquery properties getting server file process every few
seconds.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>

<script type="application/javascript">

$(document).ready(function(){

var randIDS = '<?php echo $uiq?>';

// Add Hidden Field

var hidden = $("<input>");

hidden.attr({

name:"APC_UPLOAD_PROGRESS",

id:"progress_key",

type:"hidden",

value:randIDS

});

$("#uploadImage").prepend(hidden);

$("#uploadImage").submit(function(e){



var p = $(this);

p.attr('target','tmpForm');



// creating iframe
if($("#tmpForm").length == 0){

var frame = $("<iframe>");

frame.attr({

name:'tmpForm',

id:'tmpForm',

action:'about:blank',

border:0

}).css('display','none');

p.after(frame);

}

// Start file upload

$.get("get_progress.php", {progress_key:randIDS, rand:Math.random()},

function(data){

var uploaded = parseInt(data);

if(uploaded == 100){

$(".progress, .badge").hide();

clearInterval(loadLoader);

}

else if(uploaded < 100)

{

$(".progress, .badge").show();

$(".badge").text(uploaded+"%");

var cWidth = $(".bar").css('width', uploaded+"%");

}

if(uploaded < 100)
var loader = setInterval(loadLoader,2000);

});



var loadLoader = function(){

$.get("get_progress.php", {progress_key:randIDS, rand:Math.random()}, function(data)

{

var uploaded = parseInt(data);

if(uploaded == 100){

$(".progress, .badge").hide();

parent.location.href="index.php?success";

}

else if(uploaded < 100)

{

$(".progress, .badge").show();

$(".badge").text(uploaded+"%");

var cWidth = $(".bar").css('width', uploaded+"%");

}

});

}

});});

</script>

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:4
posted:4/12/2012
language:English
pages:6