Войти Регистрация

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


Многие веб мастера жаждут узнать, как написать скрипт прогресс бара для загрузки файлов. В этом уроке мы поделимся несколькими строками 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. Надеюсь, вам понравилось, рассчитываю на интерактив в комментариях.


Демо Скачать исходники (0.07 Mb.)


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

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


Дискуссия по теме     8 Комментариев
Добавить комментарий
Вадим 28.01.2016 в 03:18
Кстати исходники тоже не рабочие, на локальном не работают(
Вадим 28.01.2016 в 03:17
У меня тоже не работает, похоже что автор написал скрипт только для себя, как то настроил, как то заработало и бог с ним!
Максим 28.05.2015 в 08:54
Не работает данный пример! Ни с библиотекой ни без неё!
том 19.09.2014 в 13:51
Файл на сервер загружается, но полоска прогресса даже не вылезает :( php 5.4 есть, в демо на вашем сайте все работает в моем браузере, а в исходниках, залитых на мой хостинг - нет.
Александр 15.02.2013 в 03:39
Что-то попробовал на своем сайте не работает шкала загрузки =/ все сделал точно так же как и в демо =(
Michael 01.06.2012 в 14:21
Почему то не отображается прогресс, хотя файл заливается. Файерфокс 12, PHP5.4.3, Apache 2.2.28. В чем может быть проблема?? Библиотеку PHP APC юзать не хочу...
Sergii 13.04.2012 в 04:49
что то не запускается может кто подскажет я скачал скрипт и закинул его в корневую папку сайта но он не работает
vitalijbojko 12.04.2012 в 21:28
мне нравиться
Добавить комментарий
Просмотров: 21797