Reg.ru: домены и хостинг

Крупнейший регистратор и хостинг-провайдер в России.

Более 2 миллионов доменных имен на обслуживании.

Продвижение, почта для домена, решения для бизнеса.

Более 700 тыс. клиентов по всему миру уже сделали свой выбор.

Перейти на сайт->

Бесплатный Курс "Практика HTML5 и CSS3"

Освойте бесплатно пошаговый видеокурс

по основам адаптивной верстки

на HTML5 и CSS3 с полного нуля.

Начать->

Фреймворк Bootstrap: быстрая адаптивная вёрстка

Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.

Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.

Верстайте на заказ и получайте деньги.

Получить в подарок->

Бесплатный тренинг "PHP для Создания Сайтов: Введение"

Что нужно знать для создания PHP-сайтов?

Ответ здесь. Только самое важное и полезное для начинающего веб-разработчика.

Узнайте, как создавать качественные сайты на PHP всего за 2 часа и 27 минут!

Записаться бесплатно->

Бесплатный курс "Сайт-Визитка За 15 уроков"

Создайте свой сайт за 3 часа и 30 минут.

После просмотра данного видеокурса у Вас на компьютере будет готовый к использованию сайт, который Вы сделали сами.

Вам останется лишь наполнить его нужной информацией и изменить дизайн (по желанию).

Получить в подарок->

Бесплатный курс "Основы HTML и CSS"

Изучите основы HTML и CSS менее чем за 4 часа.

После просмотра данного видеокурса Вы перестанете с ужасом смотреть на HTML-код и будете понимать, как он работает.

Вы сможете создать свои первые HTML-страницы и придать им нужный вид с помощью CSS.

Получить в подарок->

Бесплатный курс "Сайт на WordPress"

Хотите освоить CMS WordPress?

Получите уроки по дизайну и верстке сайта на WordPress.

Научитесь работать с темами и нарезать макет.

Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!

Получить в подарок->

Бесплатный курс "Основы работы с JavaScript"

Хотите изучить JavaScript, но не знаете, как подступиться?

После прохождения видеокурса Вы освоите базовые моменты работы с JavaScript.

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

Получить в подарок->

Воспламенитель Кода: Сайт-Визитка на CodeIgniter

Курс предназначен для тех, кто знает основы HTML и CSS.

Изучив его, Вы сможете разрабатывать гибкие и функциональные Сайты-Визитки с панелью администратора.

Все, что нужно для разработки Сайта-Визитки: от шаблона и до переноса на хостинг.

Подробнее->

JavaScript и jQuery с нуля

Курс предназначен для тех, кто хочет повысить интерактивность и удобство своего сайта для посетителей.

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

104 видеоурока: от основ JavaScript до готовых решений на jQuery.

Подробнее->

Повелитель PHP: кратчайший путь к мастерству без толстых учебников.

Курс предназначен для тех, кто хочет освоить язык PHP и свободно с ним работать.

Изучив его, Вы сможете при разработке сайтов решать любые задачи, требующие знаний PHP.

Подробнее->

*Наведите курсор мыши для приостановки прокрутки.


Ajax-форма для загрузки файлов

В этом уроке мы будем создавать форму для загрузки файлов, работающую на Ajax, что позволит вашим посетителям загружать файлы через браузер перетаскиванием или просто выбрав их с помощью кнопки "Обзор". Для наших целей мы скомбинируем мощный плагин jQuery File Upload plugin с jQuery Knob.



Скачать исходники к уроку

HTML

Как обычно, начнём с html-разметки.


    <!DOCTYPE html>
    <html>

        <head>
            <meta charset="utf-8"/>
            <title>Mini Загрузочная форма на аякс</title>

            <!-- Подключение шрифтов через гугл -->
            <link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700" rel='stylesheet' />

            <!-- Главный CSS файл -->
            <link href="assets/css/style.css" rel="stylesheet" />
        </head>

        <body>

            <form id="upload" method="post" action="upload.php" enctype="multipart/form-data">
                <div id="drop">
                    Перетяните сюда файлы

                    <a>Обзор</a>
                    <input type="file" name="upl" multiple />
                </div>

                <ul>
                    <!-- Загрузка файла будет отображаться в этом блоке -->
                </ul>

            </form>

            <!-- подключение JavaScript -->
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
            <script src="assets/js/jquery.knob.js"></script>

            <!-- Вспомогательные "дочерние" скрипты jQuery File Upload -->
            <script src="assets/js/jquery.ui.widget.js"></script>
            <script src="assets/js/jquery.iframe-transport.js"></script>
            <script src="assets/js/jquery.fileupload.js"></script>

            <!-- Главный JS файл -->
            <script src="assets/js/script.js"></script>

        </body>
    </html>

В заголовке документа между тегами head я решил подключить 2 шрифта с Google Webfonts, а до закрывающего тега body идёт некоторое количество JavaScript-библиотек. Здесь библиотеки jQuery, плагин jQuery Knob и вспомогательные "дочерние" библиотеки для jQuery File Upload plugin.

Главный элемент страницы это форма с id="upload", внутри которой находится div c id="drop", который поддерживает загрузку файлов методом drag'n'drop (т.е. обычным перетаскиванием) и неупорядоченный список.

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


    <li class="working">
        <input type="text" value="0" data-width="48" data-height="48" data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" />
        <p>Sunset.jpg <i>145 KB</i></p>
        <span></span>
    </li>

Элемент ввода input в куске кода выше скрыт с помощью CSS.

Его единственное назначение - инициировать плагин jQuery Knob, который будет выводить красивую "подложку".

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

Код jQuery

Существует 2 способа для загрузки файлов посетителями:

– с помощью перетягивания файлов в область div id="drop" (поддерживается во всех браузерах, кроме IE)

– с помощью кнопки "Обзор". Это действие инициирует клик по скрытому элементу формы input, который выводит окно проводника операционной системы для загрузки файла.

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

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

assets/js/script.js

    $(function(){

        var ul = $('#upload ul');

        $('#drop a').click(function(){

            //Симуляция клика по кнопке ввода для вывода на экран окна "проводника"
            $(this).parent().find('input').click();
        });

        // инициализация плагина загрузки файлов jQuery File Upload
        $('#upload').fileupload({

            // этот элемент позволяет загружать файлы путём перетаскивания их в нужную область
            dropZone: $('#drop'),

            // Эта функция вызывается тогда, когда файл был добавлен в очередь через перетаскивание или через окно                   "проводника"
            add: function (e, data) {

                var tpl = $('<li class="working"><input type="text" value="0" data-width="48" data-height="48"'+
                    ' data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" /><p></p><span></span></li>');

                // Добавляем имя файла и его размер
                tpl.find('p').text(data.files[0].name)
                             .append('<i>' + formatFileSize(data.files[0].size) + '</i>');

                // Добавляем HTML к тегам ul
                data.context = tpl.appendTo(ul);

                // Initialize the knob plugin
                // Инициализация плагина
                tpl.find('input').knob();

                // Отслеживание события клика по кнопке "отмена"
                tpl.find('span').click(function(){

                    if(tpl.hasClass('working')){
                        jqXHR.abort();
                    }

                    tpl.fadeOut(function(){
                        tpl.remove();
                    });

                });

                // Автоматически загружать файл, как только он был добавлен в очередь
                var jqXHR = data.submit();
            },

            progress: function(e, data){

                // Расчёт процентов загрузки файла
                var progress = parseInt(data.loaded / data.total * 100, 10);

                // Обновление скрытого поля input и срабатывание события по изменению обратной связи которую получает плагин jQuery knob для изменения значений уровня загрузки
                data.context.find('input').val(progress).change();

                if(progress == 100){
                    data.context.removeClass('working');
                }
            },

            fail:function(e, data){
                // Something has gone wrong!
                data.context.addClass('error');
            }

        });

        // Предотвращение действий по умолчанию, когда файл перетащили в окно
        $(document).on('drop dragover', function (e) {
            e.preventDefault();
        });

        // Хелпер, помогающий отформатировать размер файла
        function formatFileSize(bytes) {
            if (typeof bytes !== 'number') {
                return '';
            }

            if (bytes >= 1000000000) {
                return (bytes / 1000000000).toFixed(2) + ' GB';
            }

            if (bytes >= 1000000) {
                return (bytes / 1000000).toFixed(2) + ' MB';
            }

            return (bytes / 1000).toFixed(2) + ' KB';
        }

    });

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

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

– dropZone - настройка, хранящая jQuery-селектор, который будет действовать, как только файл будет перетянут и "брошен". Как только файл будет "брошен" он будет поставлен в очередь загрузки.

– add - функция обратной связи, которая вызывается как только файл был поставлен в очередь. Внутри неё находится html-отметка, которая будет представлять файл, добавляться к тегу ul и запускать метод data.submit(). Это позволит загружать файл без лишних ожиданий.

– progress - эта функция обратной связи выполняется плагином каждые 100ms (настраивается). Второй аргумент (атрибут data) содержит размер файла и информацию о том, сколько байтов данных было уже передано.

– fail - эта функция обратной связи срабатывает, когда есть какие-то проблемы в PHP-скрипте.

Скорее всего, это означает, что отсутствует или не подключен файл upload.php или же в нём присутствуют какие-то ошибки (используйте ваш браузер, в режиме просмотра кода и ошибок, чтобы исправить любые потенциальные проблемы здесь).

Свойство data.context сохраняется между вызовами методов плагина. Таким образом мы узнаём, к какому элементу li нужно отнести событие процесса загрузки или событие ошибки.

PHP

Загрузчик файлов jQuery также идёт с мощным PHP-скриптом для обработки загрузок, который вы можете хранить на своём сервере, однако в этом уроке мы напишем свой собственный.

Загрузчик файлов отправляет плагину практически то же самое, что и форма загрузки - вы можете получить информацию о загрузках через массив $_FILES:


    <?php

    // Список разрешённых форматов файлов для загрузки
    $allowed = array('png', 'jpg', 'gif','zip');

    if(isset($_FILES['upl']) && $_FILES['upl']['error'] == 0){

        $extension = pathinfo($_FILES['upl']['name'], PATHINFO_EXTENSION);

        if(!in_array(strtolower($extension), $allowed)){
            echo '{"status":"error"}';
            exit;
        }

        if(move_uploaded_file($_FILES['upl']['tmp_name'], 'uploads/'.$_FILES['upl']['name'])){
            echo '{"status":"success"}';
            exit;
        }
    }

    echo '{"status":"error"}';
    exit;

Как я упомянул несколько ранее, мы можем выделить и выбрать для загрузки сразу множество файлов, они будут загружаться один за одним, что значительно упрощает их обработку нашим PHP-скриптом.

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

Готово! Надеюсь, вы извлекли пользу из этого урока и он вам ещё не раз пригодится.

Материал подготовил Денис Малышок специально для сайта CodeHarmony.ru

P.S. Кое-что понятно, но куда двигаться дальше? Присмотритесь к премиум-урокам по различным аспектам сайтостроения, а также к бесплатному курсу по созданию своей CMS-системы на PHP с нуля. Все это поможет вам быстрее и проще освоить веб-технологии: начиная с HTML и CSS и заканчивая JavaScript, Ajax, PHP и SQL.

Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!


Смотрите также:

PHP: Получение информации об объекте или классе, методах, свойствах и наследовании

PHP: Получение информации об объекте или классе, методах, свойствах и наследовании

CodeIgniter: жив или мертв?

CodeIgniter: жив или мертв?

Функции обратного вызова, анонимные функции и механизм замыканий

Функции обратного вызова, анонимные функции и механизм замыканий

Применение функции к каждому элементу массива

Применение функции к каждому элементу массива

Слияние массивов. Преобразование массива в строку

Слияние массивов. Преобразование массива в строку

Деструктор и копирование объектов с помощью метода __clone()

Деструктор и копирование объектов с помощью метода __clone()

Эволюция веб-разработчика или Почему фреймворк - это хорошо?

Эволюция веб-разработчика или Почему фреймворк - это хорошо?

Магические методы в PHP или методы-перехватчики (сеттеры, геттеры и др.)

Магические методы в PHP или методы-перехватчики (сеттеры, геттеры и др.)

PHP: Удаление элементов массива

PHP: Удаление элементов массива

Ключевое слово final (завершенные классы и методы в PHP)

Ключевое слово final (завершенные классы и методы в PHP)

50 классных сервисов, программ и сайтов для веб-разработчиков

50 классных сервисов, программ и сайтов для веб-разработчиков

Наверх