Мини-форма выгрузки файлов AJAX

AJAX-форма загрузки файлов

В этом уроке мы разработаем ajax-форму для загрузки файлов с поддержкой Drag-and-drop, которая позволит посетителям загружать файлы через браузер. Мы будем использовать мощный плагин для мультизагрузки файлов jQuery File Upload совместно с jQuery Knob для отображения прогресса загрузки средствами CSS3/JS.

1. HTML и CSS

Как обычно, всё начинается с создания стандартного HTML5-документа и таблицы стилей:

В секции документа я подключил два шрифта Google Webfonts, а перед закрывающим тегом

Мини Ajax форма загрузки файла + JQuery эффекты!

↓ Также Вам будет интересно ↓

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

Для этой цели мы будем использовать комбинацию jQuery File Upload плагина с изящным jQuery Knob современным интерфейсом на основе CSS3 & JS. В итоге у Вас будет ajax загрузка файлов, без перезагрузки страницы, и с отличным дизайном.

Как обычно, начнем с основного документа – разметки html5. Весь документ имеет следующий вид:

Как создать PHP-скрипт для загрузки файлов с помощью jQuery и AJAX

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

Базовые настройки

Теперь займемся написанием скрипта для загрузки файлов.

СозданиеPHP-скрипта загрузки файлов

  • Создайте HTML-форму загрузки на основе Bootstrap.
  • Создайте Ajax-скрипты для загрузки файлов.
  • Примените проверку безопасности.
  • Создайте PHP-скрипты для обработки данных.

Создание HTML-формы

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

Асинхронная загрузка файлов на сервер PHP + AJAX

Про загрузку файлов на сервер я писал здесь. Сегодня я расскажу про асинхронную загрузку файлов на сервер.

В настоящее время довольно популярным решением для веб-сайтов является работа пользователя со страницей без ее перезагрузки. В большинстве своём это делается с помощью Ajax – технологии асинхронного взаимодействия с сервером, основанной на объекте XMLHttpRequest .

В этой статье рассмотрим простое решение одной из самых распространенных задач – асинхронная загрузка файла на сервер при помощи PHP. Задача будет следующая: На странице (предположим, что это страница в личном кабинете пользователя) есть форма с input типа file и кнопка Отправить . Ниже находится контейнер с картинкой (аватар пользователя по задумке) в который асинхронно подгружается картинка после выполнения AJAX запроса. И по умолчанию она просто выводится из базы данных. То есть, при загрузке картинки новое сгенерированное название будет записываться в БД, сама картинка под этим названием загружаться на сервер и выводится в контейнере взамен предыдущей. И всё это асинхронно.

Сразу скажу, что я по бОльшей степени преследовал цель описать сам процесс загрузки, особо не сосредотачиваясь на «элегантности» кода ). Кто как захочет использовать этот код. Кто-то кусочек нужный возьмёт, кто-то целый класс напишет на его основе, кто-то переделает для себя, кто-то вовсе не будет его использовать никак. Тем более, там действительно, нужна доработка под боевые задачи. Например, валидацию на MIME-типы (и другие проверки) нужно делать ещё в JS до попадания данных скрипту PHP. В скрипт данные должны приходить отвалидированные. Или при загрузке картинки удалять на сервере старую картинку. Поэтому я решил, что полезнее будет подробно описать процесс, нежели допиливать до идеала то, что каждый для себя доработает как нужно. Поехали.

Безусловно, подключаем jQuery (если ещё в проекте нигде данная библиотека не подключена):

Простая разметка HTML формы и картинка из базы. Предположим, что у вас уже есть база данных и в базе уже есть таблица (например, user ). В блоке с выводится картинка из базы. Я весь этот код помещу в файле index.php .

Немного CSS стилей:

В файле upload.php :

Вот и все. Ясное дело, что это не идеальное решение и как использовать его (если использовать) решать каждому самостоятельно. Может быть в дальнейшем я напишу специальный класс со всеми недочётами. А пока, как-то так.

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

Ajax на практике.

Загрузка файлов.

Серия статей «Ajax на практике«

  • Основы передачи данных
  • Получение данных из формы
  • Загрузка файлов
  • Progress Bar — индикатор процесса загрузки
  • Запрос на чистом JavaScript

В прошлой статье, мы пробежались по нескольким основным методам для получения данных и их дальнейшей передаче AJAX-запросом. Теперь пришло время поговорить о том, как же можно загружать файлы с помощью AJAX. Еще до недавнего времени, способов загружать файлы без перезагрузки самой страницы, было не так уж и много (скрытый iframe, Flash). Они и сейчас используются по причине того, что еще остаются пользователи со старыми версиями браузеров, которых не коснулся прогресс. Но оглядываться назад не будем, посему шагаем в ногу со временем.

Топ-пост этого месяца:  Таксономия WordPress работа с терминами

Рассмотрим, на мой взгляд, один из самых удобных способов для работы с файлами (и не только) — объект FormData. Пусть будет такая простенькая форма, для загрузки аватара пользователя:

HTML (файл index.html)

Перейдем к JS-части. С полем «Ф.И.О» сложностей не будет и его используем только для наглядности того, что вместе с файлом, мы можем отправлять любые другие данные.

jQuery (файл script.js)

(*)Обратите внимание на то, что передаем форму не объектом jQuery, а DOM-элемент

PHP-обработчик (файл handler.php)

‘; $req = ob_get_contents(); ob_end_clean(); echo json_encode($req); // вернем полученное в ответе exit; >

Если всё было сделано правильно, то на экране нам выведится информация в таком виде:

Ясное дело, что выводить эту информацию нам не потребуется, а нужно будет сохранять файл на сервере, указав ему место «постоянной прописки» ;). Как загружать/сохранять файлы средствами php, я описывать тут не буду, т.к. тема не маленькая и ей можно посветить отдельную статью. Для самых нетерпеливых, могу дать пару намёков — используем: move_uploaded_file(), getimagesize(), Fileinfo и другие полезные функции. И не забывайте, что очень желательно задавать файлам уникальные имена, т.к. при совпадении имён и расширений, старый файл будет попросту перезаписан новым.

«Замечтательно! — скажите вы. — А как же быть, если нужно загрузить несколько файлов одновременно?» Ничего сверхъестественного и существует несколько способов реализации:

  1. Используем атрибут multiple (в нашем случае, позволяет для одного поля input указывать несколько файлов). Добавляем этот атрибут в наше поле и изменяем его имя, добавив квадратные скобки «[]». Это укажет, что мы передаем массив данных из этого поля: Способ хороший, но к сожалению не все браузеры с ним дружат.
  2. Заранее подготовить несколько полей, которым так же можно указать одинаковые имена массивом: Это уже кроссбраузерный вариант, но и он имеет маленькие недостатки при определённых обстоятельствах. К примеру, мы создали два поля, а пользователю необходимо загрузить три и более файлов.
  3. Динамическое добавление полей. Тут мы создаем одно поле и добавляем какую-нибуть кнопку, по нажатию на которую, пользователь сможет добавлять необходимое кол-во дополнительный полей. Каким способом добавлять поля — дело вашего вкуса и фантазии. Можно заранее подготовить код поля в JS, присвоив его переменной, можно клонировать уже существующий элемент — clone() и т.д.

Во всех трёх вариантах, на стороне сервера, мы получим массив файлов и, как с любым другим массивом, обрабатываем его в цикле.

Ещё одним моментом, который сто́ит затронуть — это добавление файлов (и других данных) в FormData, если формы, как таковой, нету или данные берутся из других источников. Для этой задачи, будем использовать метод append(), который похож на jQuery-метод append(), но выполняет немного другой функционал. Синтаксис метода:

Где параметры: name Имя поля, данные которого передаются в параметре value. По сути, если мы взяли данные не из поля формы, у которого есть атрибут name, то мы этот name задаём сами. value Значение поля. Может быть типа Blob, File или string filename Необязательный параметр. Для типов Blob и File — имя файла, сообщаемое серверу

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

Вуаля, собственно новые данные добавлены к набору передавемых на сервер. Наша дата будет в переменной $_POST[‘date_upl’]. Для добавления еще одной и более пары «ключ — значение», используем ту же конструкцию. С файлами дело обстоит так же, но нужно учитывать, что значением является DOM-элемент, а не объект jQuery. И напомню, что абсолютно все данные, приходящие от клиента , должны в обязательном порядке подвергаться проверке, фильтрации, валидации и т.д.!

На этом можно было бы поставить многоточие, но не точку, т.к. тема обширна и всегда будут обстоятельства, которые потребуют нестандартных путей решения. Осталось еще пара небольших вопросов, которые относятся к данной теме, но я решил их вынести в отдельные статьи. Непосредственно по теме загрузки файлов — создание прогрессбара (индикатора выполнения загрузки на сервер) и Ajax на чистом (нативном) JS, без использования фреймворков.

Мини-форма выгрузки файлов AJAX

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

Эффекты блочного раскрытия

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

15 полезных .htaccess сниппета для сайта на WordPress

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

20 бесплатных тем для WordPress в стиле Material Design

Material Design — это набирающий обороты тренд от Google. В данной подборке собраны бесплатные темы для WordPress, выполненные в этом популярном стиле.

20 сайтов с креативным MouseOver эффектом

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

Топ-пост этого месяца:  Построение компилятора Angular глубокое погружение в процесс компиляции программы

45+ бесплатных материалов для веб дизайнеров за август 2020

Под конец месяца предлагаем ознакомиться с набором бесплатных материалов для веб дизайнеров за прошедший месяц.

Бесплатка: PSD шабон Modus Versus

Вашему вниманию предлагаем PSD шаблон с множеством элементов.

Мини-форма выгрузки файлов AJAX

Освойте бесплатно наиболее простой, быстрый и гибкий способ создавать адаптивные веб-сайты.

Дизайн лендинга

Создавайте дизайн любых сайтов — для себя и на заказ!

Популярное

  • Главная
  • ->
  • Материалы
  • ->
  • Ajax-форма для загрузки файлов

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

HTML

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

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

Главный элемент страницы это форма с , который поддерживает загрузку файлов методом drag’n’drop (т.е. обычным перетаскиванием) и неупорядоченный список.

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

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

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

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

Код jQuery

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

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

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

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

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

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

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

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

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

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

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

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

Топ-пост этого месяца:  Как оживить flat дизайн сайтов точечным шаблоном (примеры)

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

PHP

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

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

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

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

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

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

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

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

Как реализовать скачивание файла через AJAX?

Здравствуйте
Имеется веб-страница с формой. При нажатии на кнопку, на сервер отправляются данные с помощью jQuery.
Код запроса выглядит так:

На сервер данные приходят и обрабатываются. После обработки сервер отдает файл следующим образом(код прописывается в контроллер Laravel):

При получении ответа приходит обычный текст. Скачивания файла не происходит.
Вопрос:
Как правильно принять файл на стороне клиента, чтобы выполнялось скачивание?
Заранее спасибо!

Мини-форма выгрузки файлов AJAX

Понадобилось сделать достаточно очевидную, казалось бы, вещь — страничку, на которой можно заполнить несколько полей формы, выбрать несколько файлов и при нажатии на кнопку чтобы всё это вместе отправлялось на сервер без перезагрузки страницы (через ajax).

Оказалось, что есть ряд ньюансов. По отдельности нет проблем, а чтобы всё вместе — начинаются сложности. В итоге всё заработало, так что предлагаю простой пример.
После успешной загрузки сервер возвращает содержимое массивов _POST и _FILES, которое выводится на ту же страницу.

Проверял в Windows версиях FF, Chrome, IE, Opera, а также в Android Chrome и старом Android Browser. Под IOS не проверял — нет под рукой.

Не работает в Safari 5.34/Win. Причина непонятна (симптомы — отправляет файлы нулевой длины).

Не будет работать в IE

Ajax file and form data upload test by Frog

ajax загрузка нескольких файлов с php формой

Как-то для личных целей мне понадобилось сделать ajax загрузку сразу нескольких файлов. Но хотелось сделать это красиво и удобно.
Для этой задачи я выбрал горячо мной любимый jquery и несколько плагинов к нему.

  • Сам jQuery v1.3.1.
    site: www.jquery.com
  • jQuery Multiple File Upload Plugin v1.31 (fix by me)
    Плагин, позволяющий выбирать несколько файлов для загрузки.
    site: www.fyneworks.com/jquery/multiple-file-upload
  • jQuery Form Plugin v2.18
    Плагин для ajax работы с формами.
    site: www.malsup.com/jquery/form
  • jQuery BlockUI Plugin v2.14
    Красивые сообщения об ошибках.
    site: www.malsup.com/jquery/block

Так же был написан простейший php-скриптик (файл doajaxfileupload.php).

Теперь чуть подробнее обо всём.

Плагин Multiple File Upload позволяет выбирать несколько файлов для загрузки, так же он позволяет ограничивать типы файлов, количество выбираемых файлов, проверяет, выбран ли уже файл и многое другое. Использована последняя версия плагина, однако для нормальной работы с моей php формой были изменены две строчки, они помечены текстом » — replace by spiritzzz «.

Form плагин использовался для ajax отправки файлов на сервер. Очень хороший плагин, ему можно найти много применений, советую заглянуть на офф. сайт.

BlockUI Plugin служит лишь для декоративных целей, выводит красивые сообщения об ошибках плагина Multiple File Upload, его можно и не использовать.

В архиве, ссылку на который можно найти ниже, лежат самые свежие версии этих плагинов, а так же два php файлика — index.php и doajaxfileupload.php.
В index.php собственно и находится html форма, подгружается jQ и все плагины:

$( ‘.MultiFile’ ).MultiFile( <
accept: ‘jpg|gif|bmp|png|rar’ , max:15, STRING: <
remove: ‘удалить’ ,
selected: ‘Выбраны: $file’ ,
denied: ‘Неверный тип файла: $ext!’ ,
duplicate: ‘Этот файл уже выбран:\n$file!’
>>);

* This source code was highlighted with Source Code Highlighter .

— тут указываются разрешённые расширения файлов, максимальное их колличество (15), а так-же идет локализация сообщений об ошибках.

* This source code was highlighted with Source Code Highlighter .

— показывает и прячет картинку анимации при отправке

* This source code was highlighted with Source Code Highlighter .

— отвечает за отправку файлов на сервер

doajaxfileupload.php рассматривать не буду, там всё достаточно просто, а если будут вопросы — пишите в комментариях.

P.S: после загрузки выводится много отладочной информации: ошибки, размер и тип файла и тд. Это легко комментируется в файле doajaxfileupload.php

Скачать настроенную, подточенную всю эту штуку можно тут

UPD. онлайн-пример временно недоступен.

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