Кросс-браузерный прогрессбар jQuery + PHP

Опубликовано admin - вт, 04/17/2018 - 19:51

До сих пор, из-за отсутствия поддержки браузерами Internet Explorer индикации окончания загрузки файлов, приходится искать всевозможные решения для отображения процесса загрузки в процентах. Для обычных хостингов добиться правильного кроссбраузерного решения ещё сложнее, так как кроссбраузерный способ, изложенный в этой статье будет рассчитан для выделенных серверов или VPS, однако есть и объяснение не кроссбраузерного, но так же рабочего варианта.

Один из вариантов - использовать для браузеров на WebKit и Mozilla встроенных возможностей, соответствующих стандартам W3C и установка flash загрузки для Internet Explorer. Однако, указанное решение мне не подходит, так как flash всегда казалась излишней на web страницах и затрудняющей доступ к приложению из-за необходимости установки соответствующего flash плагина. Поэтому я выбрал APC и jQuery с PHP.

APC, jQuery и PHP

Плюсы APC, jQuery и PHP:

кроссбраузерный прогрессбар

Минусы APC, jQuery и PHP:

дополнительная настройка сервера;
точность загрузки не совсем верная, по сравнению с встроенными решениями для браузеров;

Для начала установите APC и настройте его, как показано на изображении:

откройте терминал и введите следующие команды:

yum install php-pear

yum install php-devel

yum install httpd-devel

pecl install apc

Если при установке возникнут следующие ошибки:

running: make /var/tmp/APC/apc.c:463: error: 'apc_regex' has no member named 'preg' /var/tmp/APC/apc.c:463: error: 'apc_regex' has no member named 'preg' /var/tmp/APC/apc.c:464: error: 'apc_regex' has no member named 'nreg' /var/tmp/APC/apc.c:464: error: 'apc_regex' has no member named 'nreg' make: *** [apc.lo] Error 1 ERROR: 'make' failed

необходимо выполнить:

yum install pcre-devel

если не помогло, то:

yum install pcre-devel pecl install apc-beta

APC необходимо включать как модуль в конфигурационном файле apache и php.ini:

echo "extension=apc.so" > /etc/php.d/apc.ini

Ещё необходимо установить параметр частоты обновления кэша загрузки файла apc.rfc1867_freq в php.ini, например так:

apc.rfc1867_freq = 10k

После этого перезагрузите сервер:

/etc/init.d/httpd restart

Если у вас PHP 5.4, - APC не нужен! Подробно об этом написано в последнем разделе статьи.

jQuery и PHP

После того как настроили APC, напишем скрипты загрызающие файлы на сервер:

index.php - файл с кнопкой загрузки;
upload_process.php - файл обрабатывающий запросы и возвращающий количество загруженного файла;

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr"> <head> <title>Progressbar</title> <?php //скрипт загружающий файл $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; } } } ?> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ var loader; // загружаем файл по событию submit $("#uploadImage").submit(function(e){ var randIDS = Math.random(); var p = $(this); p.attr('target','tmpForm'); // в этот же файл(index.php) загружаем наш файл p.attr('action','index.php?progress='+randIDS); // если первый раз, то создаём нужные элементы if($("#tmpForm").length == 0){ var hidden = $("<input>"); hidden.attr({ name:"APC_UPLOAD_PROGRESS", id:"progress_key", type:"hidden", value:randIDS }); $("#uploadImage").prepend(hidden); var frame = $("<iframe>"); frame.attr({ name:'tmpForm', id:'tmpForm', action:'about:blank', border:0 }).css('display','none'); p.after(frame); } else { // иначе просто меняем переменную $('#progress_key').attr({value:randIDS}); } // начало загрузки файла на сервер $.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) // если статус загрузки меньше 100 то запускаем повтороную проверку 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(); $('#status').empty().text('Загрузка файла звершена!'); // если статус загрузки равен 100, то останавливаем интервал clearInterval(loader); } else if(uploaded < 100) { $(".progress, .badge").show(); $(".badge").text(uploaded+"%"); var cWidth = $(".bar").css('width', uploaded+"%"); } }); } }); }); </script> </head> <body> <form name="uploadImage" id="uploadImage" enctype="multipart/form-data" action="" 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> <span id="status"></span> </form> </body> </html>

Оценка

199 просмотров

Взаимосвязанные материалы

# 1 . Кросс-браузерный прогрессбар jQuery + PHP ( вторник, апреля 17, 2018 - 19:51 ),

# 2 . Кросс-доменный ajax ( четверг, июня 7, 2012 - 20:39 ),

Ранее кроссдоменный ajax запросы были невозможны, за исключением запросы в офрмате jsonp. читать...

# 3 . jQuery Masonry и Infinite Scroll ( суббота, августа 6, 2011 - 23:18 ),

Пришлось столкнуться с разработкой сайтов для Ipad и подобных устройств. Для создания красивых эффектов выбрал jQuery Infinite Scroll и jQuery Masonry. читать...

Кросс-браузерный прогрессбар jQuery + PHP

APC, jQuery и PHP

jQuery и PHP

Теги

Взаимосвязанные материалы