Как создать загрузчик файлов в стиле Ajax

загрузчик файлов

От автора: в этом учебнике при помощи jQuery, Ajax и Php мы создадим простой загрузчик файлов в стиле Ajax. Тот, который вы легко сможете осуществить на своем сайте, дополненный серверной валидацией и валидацией на стороне клиента.

Вступление

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

загрузчик файлов ajax

скачать исходники

пример загрузчика файлов ajax

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Шаг 1: разметка HTML

Начните с создания документа html и определения формы, которая будет использоваться для загрузчика файлов. Сохраните его как index.html.

Начинаем свой документ html с добавления обычных doctype, html, тэгов head и body. В head добавляем заголовок, ссылку на таблицу стилей, ссылку на Google jQuery CDN и свой плагин Ajax. Второй тэг script находится там, куда мы будем помещать весь код после того, как документ будет готов.

Внутри body делаем разметку своей страницы при помощи div‘а #file_holder, который станет нашим упаковщиком, формой и нескриптовой кнопкой submit (отправить), которая поможет сохранить юзабилити (простоту и доступность использования), если у пользователя в браузере не включен javascript, ввод загрузчика файлов и два div’а, которые будут содержать изображение загрузки, а также сообщения об ошибках.

Браузер с отключенным javascript

Если у нашего пользователя не активирован javascript, операция form позаботится о передаче файла к upload.php, пользователь будет просто переадресован к ней вместо того, чтобы оставаться на той же странице, и появится сообщение об успешном выполнении или ошибке.

Зависимые файлы

Для изображения загрузки я применил «указатели-стрелки» (arrows) из http://www.ajaxload.info/.
Выберите то изображение, которое вам нравится, сохраните его как ajax-loader.gif и выгрузите на свой сервер.

Нам также понадобится плагин Ajax upload. Сохраните его как ajaxupload.js и выгрузите на сервер в папку с названием "ajax".

Шаг 2: стили CSS

Для функциональности этой простой формы требуется всего три строки стилей, скрытие div’а loading на странице загрузки, и расцвечивание текста сообщений об успешном выполнении и ошибке. Конечно, вы можете все улучшить и сделать красивее, чем в моем простом примере загрузчика. Сохраните как style.css.

Шаг 3: Javascript

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

Мы начинаем назначение переменных своего загрузчика Ajax, во-первых, с установки ввода #userfile как переменной загрузки, а затем назначаем действие, с которого начинает действовать ввод, когда выбирается файл.

Вышеприведенный фрагмент говорит загрузчику что делать, как только файл выбран из нашего файлового ввода. Во-первых, показывается анимация загрузки, пока проверяется расширение файла. Если расширение файла не совпадает с предопределенными, выгрузка останавливается и пользователю показывается сообщение об ошибке. Как только пользователь предпринимает новую попытку с правильным расширением файла, сообщение об ошибке убирается, и данные файла предаются в файл upload.php при помощи команды setData.

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

Скрипт целиком

Скопируйте и вставьте весь этот код в раздел head своего документа.

Шаг 4: PHP

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

Хотя многое тут и так понятно, я поясню, что выполняет все вышеприведенное.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Переменная $max_filesize определяет максимальный размер разрешенного для выгрузки файла, в данный момент она установлена на 2mb (так по умолчанию выставляют свои серверы большинство хостинг-провайдеров), определенные в байтах.

Переменная $filename получает из ввода #userfile название файла целиком, включая расширение.
Переменная $ext проверяет правильность расширения на соответствие массиву $allowed_filetypes.

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

$file_strip замещает любые пробелы в названии файла подчеркиваниями, зачем? Если имя файла используется в url, таком как ссылка на изображение и т.д., пробелы часто замещаются на 20% созданием адреса sloppy и его сложно индексировать поисковикам.

Наконец, $upload_path определяет папку, в которую будут перемещаться выгрузки, соответствующую домашней на вашем сервере. Другими словами, большинство серверов конфигурируются файловой структурой вроде этой:/home/yourusername/yoursite.com/path/to/uploads/. Убедитесь, что используете полный путь с начальными и конечными метками "/".

Находим корневой каталог сервера

Чтобы легко найти путь, который нужно здесь ввести, попробуйте выгрузить на сервер нижеприведенный скрипт php, назвать его root.php и получить к нему доступ из своего браузера. Убедитесь, что после того, как нашли корневой каталог своего сервера, вы удалили файл, чтобы не выставлять его напоказ.

Остальная часть скрипта просто обрабатывает функции, основанные на установленных нами в вышеприведенном коде параметрах.

Вначале проверяется массив видов файлов, и если данного расширения в нем нет, скрипт останавливает выполнение (die) и выводит сообщение об ошибке.

Проверьте размер файла на соответствие установленной переменной, если он больше, скрипт останавливает выполнение (die) и выводит сообщение об ошибке.

Эта часть кода проверяет папку на сервере, чтобы убедиться, что она перезаписываемая, или пригодна для размещения в ней файла нашим скриптом. Если нет, снова применяем (die) и выводим сообщение пользователю.

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

upload.php

Скопируйте и вставьте весь этот код в новый файл и сохраните его как upload.php

Устанавливаем права доступа к файлам

Перед тем, как протестировать свой загрузчик, нужно убедиться, что папка, куда пойдут наши выгрузки, перезаписываемая. Я обойдусь без обычных вещей типа CHMOD на 777 и пойду дальше. Если вы знакомы с использованием клиента Telnet, эта часть – не для вас, она для тех, кто был совсем как я, когда начинал, жаждущим прочесть и выучить CHMOD и тут же подумавшим «Что за фигня?»

В сущности, откройте свой ftp-клиент и пройдите в папку, куда перемещаются загрузки из этого загрузчика. Щелкните правой кнопкой мыши по папке и выберите свойства (properties), убедитесь, что все окна установлены на read, write и execute, (777) нажмите OK и закройте окно.

Пройдите в Dreamweaver к папке с выгрузками во время дистанционного управления и щелкните правой кнопкой мыши по файлу, выберите «Установить права доступа» (Set permissions) и далее следуйте вышеприведенным инструкциям.

Изменение прав доступа к файлам на сервере

Шаг 5: попробуйте

Последний шаг – попробовать и посмотреть, работает он или нет. Если ничего не происходит или что-то ломается, вернитесь обратно, пройдите по тщательно расписанным мною шагам и определите, что не так. Не бойтесь скачать исходные файлы и проверить демо-версию, чтобы лучше понять, как работает загрузчик.

Спасибо за прочтение!

Автор: VagrantRadio

Источник: www.vagrantradio.com

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Создание зависимых списков средствами AJAX

Прямо сейчас посмотрите курс по созданию зависимых списков средствами AJAX!

Смотреть курс

Метки: ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (12)

  1. Иван

    Спасибо. Хорошая статья получилась!

  2. Pocherk

    Спасибо! В хозяйстве пригодится :)

  3. Николай

    Спасибо! Очень полезная информация!

  4. Юрий

    Спасибо, а то никак не доберусь, чтобы нормально разобраться со всем этим

  5. Debaf

    Хорошие у вас, обучающие статьи, очень помогли спасибо человеческое!!!

  6. Александр

    Хорошие у вас, обучающие статьи, очень помогли спасибо

  7. Сергей

    Спасибо за интересные уроки.

  8. Андрей

    Подскажите пожалуйста.
    Как сделать, чтобы загрузка файла начиналась только после нажатия самой кнопки на форме(type=»submit») а не сразу полсе выбора файла.

    Поясню:
    Есть поле выбора файла
    Есть другие текстовые поля, обязательные для заполнения
    Есть кнопка «Загрузить».

    Требуется чтобы загрузка файла и загрузка всего скрипта начиналась только после нажатия на кнопку «загрузить»
    (как с вариантом при отключенном java в браузере)

    Понимаю что надо копать в файле js.

  9. SIS

    Jquery для слабаков!

  10. Юлия

    Добрый день скажите пожалуйста а есть ли видео урок как сделать домашний файлообменник ?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree