Скрипт прогресс бара загрузки файлов PHP + jQuery

Многие веб мастера жаждут узнать, как написать скрипт прогресс бара для загрузки файлов. В этом уроке мы поделимся несколькими строками PHP и jQuery кода, и создадим красивый прогресс бар загрузки файлов. Получится очень красивый скрипт, не верите, смотрите демо, или скачайте исходники.

Чтобы запустить этот скрипт, вам необходимо установить PHP APC библиотеку. Если у вас PHP 5.4, то библиотеку устанавливать вовсе не нужно. Для дизайна странички, мы также будем использовать bootstrap CSS библиотеку, но на этом мы останавливаться не будем. Ведь целью урока является создание прогресс бара, а не дизайн.

Файлы скрипта прогресс бара

Рассмотрим фундаментальный код скрипта. Весь архив скрипта, вы сможете скачать в конце урока.

get_progress.php

Следующий PHP код, будет идентифицировать степень загрузки файла на серверной стороне.

<?php
session_start();
error_reporting(0);
/*
// Для PHP 5.4 версии
 $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;
*/
// Для PHP 5.2+ php_apc.dll или php_apc.so библиотек
 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

Здесь производиться генерация основной формы загрузки файла. Помните, это только пример, прописывать правила валидации придется самому.

<?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 файл

В этом файле, мы получаем результат загрузки файла с сервера каждые несколько секунд, после чего меняем значения прогресс бара.

<script type="application/javascript">
 $(document).ready(function(){
var randIDS = '<?php echo $uiq?>'; 
// добавляем скрытое поле
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');
  
// создаем 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);
 }  
// Начинаем загрузку файла  
 $.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>

Заключение

Наслаждайтесь! Вот простой скрипт прогресс бара загрузки файла с участием PHP и jQuery. Сложного ничего нет, единственное, требуется наличие APC библиотеки, если версия PHP ниже 5.4. Надеюсь, вам понравилось, рассчитываю на интерактив в комментариях.

Источник материала ...

Дальше: Горизонтальное выпадающее меню на jQuery + HTML + CSS