Tạo Progress bar với Jquery và PHP

Bài viết hướng dẫn cách tạo thanh tiến trình đẹp mắt bằng Jquery và PHP

Để có thể chạy được các script dưới đây thì yêu cầu bạn phải cài PHP library hoặc phiên bản PHP 5.4 và kích hoạt extension này.

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

I. Get_Progress.php
Đoạn mã PHP xử lý tiến trình từ phía server

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

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

}

II. Index.php
Đoạn mã upload file với PHP

<?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>

<?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>

</div>

</form>

III. Javascript file
Dùng các thuộc tính của Jquery để lấy tiến trình upload file từ server sau mỗi giây.

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

Done! Vậy là xong, chúng ta đã tạo ra một thanh progress bar thật đẹp phải không nào! Chúc bạn có những website đẹp với thủ thuật này!
Nếu bạn không làm được theo hướng dẫn, hay download code dưới đây về ngâm cứu nhé!

Download code View demo

Tạo Progress bar với Jquery và PHP

Like this:

Có liên quan

Nguyễn Trung Hiếu

Share this:

Like this:

Có liên quan

Nguyễn Trung Hiếu