Файл admin ajax php увеличивает загрузку. Как уменьшить нагрузку на сервер с помощью admin-ajax в WordPress. Полное отключение Heartbeat API

Распространенный сценарий при работе с WordPress – диагностика повышенного использования admin-ajax.php. Если вы некоторое время работаете с WordPress, вы, скорее всего, сталкивались с этой проблемой при запуске сторонних тестов скорости или проверке серверных логов доступа. Обычно повышенное использование admin-ajax.php связано с применением сторонних плагинов либо частыми некэшируемыми запросами из панели администратора, основанными на Heartbeat API (к примеру, автосохранение черновиков). Очень важно сразу же выявлять такие высокие всплески обращений к admin-ajax.php, поскольку они могут вести к тому, что сайт будет недоступен. Ознакомьтесь с приведенными ниже рекомендациями по устранению проблем с admin-ajax.php в WordPress.

Что представляет собой файл admin-ajax.php?

Сам по себе файл admin-ajax.php не является плохим при грамотном его использовании. Он выступает частью ядра. Файл был добавлен командой разработчиков WordPress в релизе 3.6. Цель admin-ajax.php – создать соединение между браузером и сервером с помощью AJAX. Это позволяет использовать расширенные функции, среди которых улучшенное автосохранение, отслеживание версий, таймауты логина, управление сеансом, а также уведомления о блокировке записи при редактировании ее несколькими авторами. Все эти возможности великолепны, особенно для тех пользователей, которые поддерживают сайты с несколькими авторами и администраторами.

«Идея состоит в том, чтобы реализовать относительно простой API, который будет отправлять XHR запросы на сервер каждые 15 секунд и запускать события (или callback) при получении данных. Другие компоненты тоже смогут «подцепляться» или получать уведомления об активности других пользователей. Это можно применять для блокировки одновременного редактирования виджетов или меню, либо выполнения других задач, требующих регулярных обновлений с сервера»

Если вы не являетесь технически подкованным пользователем, то в таком случае единственная ситуация, которая будет вам важна в контексте admin-ajax.php – это попытка понять, почему этот файл замедляет скорость в тестах (к примеру, в Pingdom). Либо вы можете увидеть кучу запросов к этому файлу в логах доступа хостинга.

Появление admin-ajax.php в тестах скорости и логах доступа обычно является результатом двух различных сценариев: одного во фронтэнде и второго в бэкэнде. Об этом мы поговорим далее.

Плагины могут приводить к замедлению admin-ajax.php

Самая популярная проблема, с которой сталкиваются пользователи в контексте admin-ajax.php, вызвана сторонними плагинами. Обычно это видно во фронтэнде и отображается в тестах скорости. Разработчики используют этот файл или AJAX для добавления функционала к своим плагинам. Если вы видите запрос к admin-ajax.php, это еще не означает, что он обязательно будет замедлять сайт. AJAX загружается после представления страницы, и некоторые запросы могут загружаться асинхронно. Но это не всегда означает и то, что разработчик выполнил загрузку грамотно и написал эффективный код в плане производительности.

Ниже представлены примеры того, как мы быстро диагностировали замедление работы admin-ajax.php. Мы использовали GTmetrix, поскольку он позволяет нам изучать данные отдельных записей и ответов. Pingdom, к сожалению, не позволяет нам видеть запросы данных в формах. Вы также можете использовать Google Chrome Devtools или WebPageTest.

Высокая нагрузка на admin-ajax.php при использовании плагина Visual Composer

Ниже приведен наш WordPress сайт, на котором мы столкнулись с очень высокими задержками при использовании admin-ajax.php. Как вы можете видеть по GTmetrix, задержка запросов к admin-ajax.php составляет более 8 секунд. Остальная часть «водопада» выглядит нормально, но такую задержку нужно обязательно решать владельцам сайтов.

Если вы щелкнете по запросу POST admin-ajax.php, вы увидите следующие три вкладки: Headers, Post и Response. При диагностике рассматриваемых нами проблем нас будут интересовать только вкладки Post и Response. Подсказки можно видеть во вкладке Response. Мы видим, что часть запроса связана со скриптом vc_shortcodes-custom-css.

Быстрое копирование и вставка в Google помогают понять, что проблема вызвана плагином Visual Composer.

Следующий шаг для пользователя – убедиться в том, что плагин Visual Composer полностью обновлен. Если да, то в таком случае необходимо обратиться к разработчикам плагина и рассказать им о проблеме с admin-ajax.php. На самом деле это достаточно распространенная проблема, если судить по постам на Stack Overflow. Если разработчик не способен решить ее в своем плагине, всегда найдется несколько альтернативных плагинов, которые делают примерно то же самое – в этом и состоит мощь WP. К примеру, если вам нужны билдеры страниц, то вы можете попробовать Beaver Builder или Elementor.

Высокая задержка с admin-ajax.php из-за плагина Notification Bar

Второй пример, с которым столкнулись мы сами, произошел после установки стороннего плагина. Мы заметили резкий подъем обращений к admin-ajax.php.

Опять же, если вы нажмете на запрос POST admin-ajax.php, то вы сможете исследовать все в деталях. Мы видим, что в данных присутствует строка «action=mtsnb_add_impression&bar_id=88&ab_variation=none».

Как правильно, первая часть действия post обычно относится к CSS классу плагина. Мы делаем быстрый поиск в Google по «mtsnb» и обнаруживаем, что этот класс используется в плагине Notification Bar, который запущен у нас на сайте.

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

Дедовский метод определения источника admin-ajax.php запросов

Выше мы привели несколько простых способов поиска плагина на WordPress сайте, который может приводить к данной проблеме с admin-ajax.php. По нашему опыту, эти способы работают в 99% случаев. Однако бывает и так, что данные POST или действия могут быть не такими понятными, а потому вам придется двигаться старым проверенным путем. Просто отключите все плагины на своем WordPress сайте. Запустите тест скорости. Если admin-ajax.php нигде не обнаружится, то включайте по очереди каждый плагин и проводите тест скорости. Таким образом вы быстро выявите проблемный плагин.

CPU-проблемы с admin-ajax.php в бэкэнде

Вторая серьезная проблема заключается в том, что WordPress Heartbeat API использует admin-ajax.php для запуска вызовов AJAX от веб-браузера, что может вести к высокой нагрузке на CPU. Каждый AJAX запрос также загружает полный WordPress бэкэнд в обход всех форм кэширования. Как правило, вы не увидите этого в тестах скорости. Это особенно важно знать тем, кто использует дешевые виртуальные хостинги, поскольку у них нет большого пространства для маневров, когда дело касается CPU. Такая проблема всплывала с хостингом HostGator ранее.

Один из сценариев, с которым вы должны быть очень осторожны – автоматическое сохранение в WordPress и наличие открытых вкладок. К примеру, мы запустили новый проект на нашем сайте и оставили вкладку открытой. Heartbeat API по умолчанию опрашивает файл admin-ajax.php каждые 15 секунд, чтобы сделать автоматическое сохранение. Это видно по журналам доступа. Если бы мы оставили вкладку открытой на день, то один пост мог сгенерировать 5760 запросов за сутки.

Это слишком много запросов в бэкэнде для одного человека. Представьте, что будет, если у вас на сайте есть несколько редакторов. Эти запросы увеличатся в геометрической прогрессии. Мы сталкивались с таким во время нашего исследования DARTDrones, в котором мы помогали расширить их WooCommerce сайт для Shark Tank. У них было свыше 4100 вызовов admin-ajax.php за сутки, при этом посетителей было только 2000. Это не самое лучшее соотношение запросов к визитам. Наше исследование показало, что большинство запросов шло из консоли – они генерировались из-за того, что администраторы обновляли сайт, готовя его к показу.

Есть способ обнаружения некоторых проблем с обращениями к admin-ajax.php в бэкэнде, когда дело касается автосохранений, ревизий, блокировки записей и т.д. Для этого необходимо установить плагин Heartbeat Control .

Плагин Heartbeat Control в данный момент установлен на более 50 000 сайтов и имеет рейтинг 5 из 5. Прошло уже 2 года с момента его обновления, но он работает все так же, поскольку Heartbeat API тоже не обновлялся.

Плагин позволяет вам управлять частотой обращений к WordPress Heartbeat API с помощью пары щелчков мыши. Первая опция дает возможность управлять расположением heartbeat – к примеру, отключать его везде или разрешать только на страницах редактирования записей. Мы рекомендуем использовать последний вариант, поскольку полное отключение плагина может вести к тому, что некоторые плагины, зависящие от Heartbeat API, могут перестать работать.

Вторая опция позволяет вам задавать частоту опроса. Изменение с 15 сек до 60 сек позволит вам значительно сэкономить количество запросов и сохранить серверные ресурсы (снизив нагрузку на ЦП).

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

Заключение

Как вы можете видеть, есть несколько быстрых и простых опций для диагностирования и устранения проблем с admin-ajax.php. Как правило, они появляются из-за сторонних плагинов, которые могут конфликтовать друг с другом или иметь плохую кодовую базу.

Сталкивались ли вы с такой проблемой на своем сайте? Если да, то поделитесь своими историями.

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

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

Что такое admin-ajax.php в WordPress?

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

Две очень характерные особенности Heartbeat API:

1. Автосохранение

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

2. Сообщение блокировки

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

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

WordPress Heartbeat API генерирует запросы для связи с сервером и запускает события на прием/ответ данных. Как правило, это увеличивает нагрузку на сервер и в конечном итоге замедляет панель администратора WordPress.

Живой пример

Мы вошли в приборную панель WordPress и приступили к редактированию поста. Далее, мы оставили вкладку открытой в течение нескольких минут, и начали просмотр других вкладок. Приборная панель по – прежнему в системе, и вы можете увидеть, что admin-ajax непрерывно посылает запросы .

В соответствии с упомянутым выше билетом, администратор-ajax.php в WordPress генерирует запросы через каждые 15 секунд. Запросом может быть любая связь с сервером.

Ускорить панель администратора WordPress

Чтобы ускорить бэкэнд WordPress, лучший подход, это отключить Heartbeat API или по крайней мере установить более продолжительный промежуток времени, так чтобы он не генерировал запросы на сервере через каждые несколько секунд.

Установить плагин Heartbeat Control

Войдите в админку WordPress и перейдите к Плагины >> Добавить новый , найдите Heartbeat Control , установите и активируйте его.

Перейдите на вкладку Настройки >> Настройки Control Heartbeat . Там вы найдете три раскрывающихся меню для настройки плагина.

Вы можете выбрать ту область, где Heartbeat API будет работать. Есть три варианта на выбор:

  • WordPress Dashboard : Это позволит Heartbeat API в WordPress панели.
  • Frontend : Это позволит API в веб – интерфейсе.
  • Редактор сообщений : Отметьте этот флажок, если вы хотите, позволить Heartbeat API включить на автосохранение и блокировки почтовых функций.

Выберите этот параметр, если хотите, чтобы WordPress Heartbeat API отключался в определенных местах. Будьте осторожны при выборе местоположения, потому что другие плагины могут также использовать WordPress Heartbeat API. Если вы единственный пользователь серверной части WordPress, я бы предложил отключить его везде, а затем проверить, нарушает ли он веб-сайт. Тем не менее, если ваш сайт имеет более одного пользователя, который регулярно вносит свой вклад, мы бы предложили, чтобы вы разрешили Heartbeat API только на страницах редактирования публикации.


Эта выпадающее меню позволяет установить интервал времени, в пределах 0 – 300 секунд, чтобы выполнить админ Ajax запросы. Если установить его на 120 секунд , то запрос будет сгенерирован через каждые 120 секунд. Это позволит значительно снизить нагрузку на сервер. Настройте его в соответствии с вашими потребностями.

Создание нескольких правил

Вы можете создать несколько правил, основанных на ваших требованиях. Например, вы хотите WordPress вызвать каждые 120 секунд, но после редактирования срабатывать на 60 секунд. Для этого необходимо создать два правила. Один для панели мониторинга WordPress и другой для редактора постов и установить их частоту в 120 и 60 соответственно.

Теперь, когда вы настроили все, настало время, проверить, какие плагины замедляют веб-сайт с помощью файла admin-ajax.php.

Перейдите к GTmetrix, введите URL вашего сайта. Это займет несколько минут, чтобы проанализировать сайт. После этого перейдите к закладке Waterfall, и вы увидите, сколько времени файл принимает подключения и ответ. Прокрутите немного вниз, и посмотреть, есть ли запись POST админ-ajax.php . Если да, расширьте его и перейдите на вкладку Post. Здесь вы можете определить виновника. В нашем случае, плагин «desktop switch» использует файл admin-ajax.php и непрерывно посылает запросы на сервер. Это время, чтобы принять решение, либо заменить его другим плагином или удалить его.

Заключительные слова

Учитывая его набор функций, Heartbeat API является очень полезным на вашем сайте WordPress. Однако, если он не используется правильно, это может увеличить время загрузки на бэкэнд WordPress и на сам сайт, посылая туда и сюда запросы в WordPress.

Есть только два решения этой проблемы. Либо отключить Heartbeat API/включить его только в нескольких местах.

Если вы используете какой – либо плагин кэширования, например, W3TC, не забудьте отключить кэш объектов. Это также ускорит приборную панель WordPress.

Если у вас есть какие-либо предложения или запрос, не стесняйтесь оставить комментарий ниже.

В техническую поддержку сайт часто задают вопросы, связанные с работой скрипта admin-ajax.php на хостинге (часто его работа прерывается, заканчивается ошибкой или вызывает большую нагрузку на хостинг). Как решить все эти проблемы?

Что такое admin-ajax.php

Скрипт admin-ajax.php (так называемый WordPress heatbeat, включен с версии WordPress 3.5.2) выполняет продление пользовательской сессии WordPress - для удобства использования административной панели. Если администратор или редактор часто работает с сайтом, то это избавляет от необходимости каждый раз вводить логин/пароль. Но для 99% посетителей сайта этот функционал, скорее всего, не нужен: они ведь только читает контент, не редактируют его.

В ряде случаев admin-ajax.php может отвечать за повышенное потребление памяти и CPU на хостинге: за счет частых - каждые 15 секунд - обращений к базе данных на фоне других запросов (большинство из которых уже могут быть закэшированы). Поскольку функционал admin-ajax.php является динамическим (его нельзя кэшировать), то облако Айри, как и любой другой кэширующий инструмент, пропускает все запросы напрямую к серверу, создавая существенную нагрузку.

Как бороться с admin-ajax.php

Лучшим способом устранение нагрузки от admin-ajax.php является полное отключение этого функционала. Лучше всего это осуществить либо редактированием внутри движка WordPress, либо путем установки соответствующего плагина.

Для отключения WordPress Heartbeat для всех страниц, кроме страницы создания новой записи, нужно добавить в header.php вашей темы:

add_action("init", "my_deregister_heartbeat", 1); function my_deregister_heartbeat() { global $pagenow; if ("post.php" != $pagenow && "post-new.php" != $pagenow) wp_deregister_script("heartbeat"); }

Для решения этой проблемы через плагины WordPress можно использовать

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

AJAX запросы и admin-ajax.php

AJAX — это асинхронные HTTP запросы выполняемые на странице с помощью языка JavaScript, позволяющие общаться с веб-сервером без полной перезагрузки страницы. Это позволяет делать интерфейсы более быстрыми, отзывчивыми и динамичными.

В WordPress такой подход используется во многих местах: работа с медиафайлами, автоматическое сохранение записей, управление ревизиями, работа с произвольными полями, работа с виджетами и многое другое. И чтобы каждый раз не изобретать велосипед, файл admin-ajax.php в WordPress предоставляет удобный API для работы с AJAX запросами.

В данной статье мы не будем рассматривать сам API, но стоит отметить, что несмотря на присутствие слова «admin» в названии файла, через него могут проходить запросы и с лицевой части сайта, включая анонимные запросы из тем и плагинов WordPress. К сожалению многие источники ошибочно советуют отключить этот файл, или заблокировать его паролем — этого делать не стоит .

Большое количество запросов на admin-ajax.php

Как мы уже упомянули, файл admin-ajax.php вызывается при автоматическом сохранении записей, а также для обновления блокировок, чтобы два пользователя не могли редактировать одну и ту же запись одновременно. Это реализует API в WordPress под названием Heartbeat (сердцебиение), который построен на базе admin-ajax.php.

При редактировании записи Heartbeat отправляет запрос на admin-ajax.php каждые 15 секунд (или каждые 60 секунд, в случае если вкладка в браузере не является активной). Поэтому если вы видите в логах вашего веб-сервера большое количество запросов на admin-ajax.php стоит их проанализировать.

  • С каких IP адресов приходят эти запросы
  • С какой периодичностью они приходят
  • Сколько времени в среднем занимает один такой запрос
  • Каково содержание запроса

Итак, если эти запросы приходят с вашего IP адреса, или с IP адресов редакторов на вашем сайте, если их периодичность около 15-60 секунд, если каждый такой запрос занимает не более 0.5 сек, и содержание запросов не содержит ничего необычного, то все в порядке — файл admin-ajax.php не является источником нагрузки на ваш сервер, независимо от «большого» количества запросов. А если ваш уверяет вас в обратном, то советуем задуматься о его компетентности и о возможном переезде.

Когда admin-ajax.php действительно является проблемой

Рассмотрим несколько вариантов, когда admin-ajax.php действительно становится источником высокой нагрузки на ваш сервер, и как бороться с этой нагрузкой.

Запросы на admin-ajax.php занимают более 1 секунды

В среднем запросы на admin-ajax.php могут занимать около 300 мс. Если же на вашем сайте данные запросы выполняются более чем за одну секунду, то необходимо разобраться. Используйте средства , чтобы понять чем именно занят процесс все это время. Наверняка вы найдете медленную функцию в вашей теме или плагине, которая не имеет никакого отношения к AJAX запросам.

Если же вы не владеете средствами профилирования, или у вас нет времени разбираться в чужом коде, то попробуйте отключить все плагины и активировать стандартную тему WordPress. Затем активируйте плагины по порядку, чтобы понять какой из них является причиной медленных запросов на admin-ajax.php.

Бывает и такое, что запросы на admin-ajax.php становятся медленными не из-за конкретных плагинов или тем, а из-за неоптимальной конфигурации сервера MySQL. Такое бывает достаточно редко, и в этом случае следует заняться оптимизацией сервера базы данных.

Подозрительное содержание запроса

Файл admin-ajax.php (и admin-post.php) часто выбирается злоумышленниками для того, чтобы использовать известную уязвимость в каком-нибудь плагине. В качестве примера можно привести с популярным плагином FancyBox, где именно admin-ajax.php (или admin-post.php) послужил точкой входа.

Эти файлы выбираются не спроста, ведь каждый из них исполняет admin_init даже для анонимных HTTP запросов. Многие разработчики плагинов и тем, ошибочно считают, что раз выполняется событие admin_init , значит пользователь выполнил вход и имеет права администратора. Это не так. Повторяем — событие admin_init выполняется даже для анонимных HTTP запросов.

Итак, в случае с уязвимостью плагина FancyBox for WordPress, вот примерно то, как выглядит «подозрительное содержание запроса»:

46.4.76.174 – – "POST /wp-admin/admin-ajax.php?page=fancybox-for-wordpress HTTP/1.1" 403 4207 INPUTBODY:action=update&mfbfw%5Bext...

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

Неузнаваемые IP адреса

Этот пункт тесно связан с предыдущим. Если вы увидели запросы на admin-ajax.php с неузнаваемых IP адресов, то необходимо проанализировать эти запросы, и понять чего именно пытается сделать злоумышленник. IP адреса можно заблокировать, например по шаблону с помощью .

Слишком частая периодичность запросов

Как мы уже упомянули, на активной вкладке при редактировании записи, WordPress выполняет AJAX запрос каждые 15 секунд, т.е. для достижения 1 запроса в секунду на сервере, вам необходимо 15 редакторов с открытой вкладкой. Если вы являетесь единственным редакторов на вашем сайте, а запросов на admin-ajax.php с вашего IP адреса более 1 в секунду (мы встречали и 20/с), то стоит с этим разобраться.

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

Заключение

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

В случае с любой «лишней» нагрузкой на сервер, рекомендуем всегда проверять факты, средства профилирования — ваши лучшие друзья. Результаты порой бывают удивительными, когда например некоторые из очень популярных плагинов для WordPress оказываются самыми медленными.

Как загружать любые файлы, например, картинки на сервер с помощью AJAX и jQuery? Делается это довольно просто! И ниже мы все обстоятельно разберем.

В те «древние» времена, когда еще не было jQuery, а может он был, но браузеры были не так наворочены, загрузка файла на сайт с помощью AJAX была делом муторным: через всякие костыли вроде iframe. Я те время не застал, да и кому это теперь интересно. А интересно теперь другое - что сохранение файлов на сайт делается очень просто. Даже не обладающий опытом и пониманием, того как работает AJAX, вебмастер, сможет быстро разобраться что-куда. А эта статья ему в помощь. Если подкрепить эти возможности функциями WordPress , то безопасная обработка и загрузка файлов на сервер становится совсем плевым и даже интересным делом (пример с WordPress смотрите в конце статьи).

Однако, как бы все просто не было, нужно заметить, что минимальный опыт работы с файлами и базовые знания в Javascript, jQuery и PHP все же необходимы! Минимум, нужно представлять как загружаются файлы на сервер, как в общих чертах работает AJAX и хоть немного надо уметь читать и понимать код.

Описанный ниже метод довольно стабилен, и по сути опирается на Javascript объект new FormData() , базовая поддержка которого есть во всех браузерах.

Для более понятного восприятия материала, он разделен на шаги. На этом все, полетели...

AJAX Загрузка файлов: общий пример

Начинается все с наличия на сайте input поля типа file . Нет необходимости, чтобы это поле было частью формы (тега ).

Таким образом, у нас есть HTML код с file полем и кнопкой «Загрузить файлы».

Загрузить файлы

Шаг 1. Данные из поля file

Первым шагом, нужно получить данные загружаемых файлов.

При клике на file-поле, появляется окно выбора файлов, после выбора, данные о них сохраняются в input поле, а нам нужно их от туда «забрать». Для этого повесим на событие change JS функцию, которая будет сохранять имеющиеся данные file-поля в JS переменную files:

Var files; // переменная. будет содержать данные файлов // заполняем переменную данными, при изменении значения поля file $("input").on("change", function(){ files = this.files; });

Шаг 2. Создаем AJAX запрос (по клику)

Данные файлов у нас есть, теперь их нужно отправить через AJAX. Вешаем это событие на клик по кнопке «Загрузить файлы».

В момент клика создаем новый объект new formData() и добавляем в него данные из переменной files . С помощью formData() мы добьемся того, что отправляемые данные будут выглядеть, как если бы мы просто сабмитили форму в браузере.

Чтобы такой запрос состоялся, в jQuery нужно указать дополнительные AJAX параметры, поэтому привычная функция $.post() не подходит и мы используем более гибкий аналог: $.ajax() .

Два важных дополнительных параметра нужно установить в false:

ProcessData Отключает обработку передаваемых данных. По умолчанию, например, для GET запросов jQuery собирает данные в строку запроса и добавляет эту строку в конец URL. Для POST данных делает другие преобразования. Нам любые изменения исходных данных будут мешать, поэтому отключаем эту опцию... contentType Отключает установку заголовка типа запроса. Дефолтная установка jQuery равна "application/x-www-form-urlencoded . Такой заголовок не предусматривает отправку файлов. Если установить этот параметр в "multipart/form-data" , PHP все равно не сможет распознать передаваемые данные и выведет предупреждение «Missing boundary in multipart/form-data»... В общем, проще всего отключить эту опция, тогда все работает! // обработка и отправка AJAX запроса при клике на кнопку upload_files $(".upload_files").on("click", function(event){ event.stopPropagation(); // остановка всех текущих JS событий event.preventDefault(); // остановка дефолтного события для текущего элемента - клик для тега // ничего не делаем если files пустой if(typeof files == "undefined") return; // создадим объект данных формы var data = new FormData(); // заполняем объект данных файлами в подходящем для отправки формате $.each(files, function(key, value){ data.append(key, value); }); // добавим переменную для идентификации запроса data.append("my_file_upload", 1); // AJAX запрос $.ajax({ url: "./submit.php", type: "POST", // важно! data: data, cache: false, dataType: "json", // отключаем обработку передаваемых данных, пусть передаются как есть processData: false, // отключаем установку заголовка типа запроса. Так jQuery скажет серверу что это строковой запрос contentType: false, // функция успешного ответа сервера success: function(respond, status, jqXHR){ // ОК - файлы загружены if(typeof respond.error === "undefined"){ // выведем пути загруженных файлов в блок ".ajax-reply" var files_path = respond.files; var html = ""; $.each(files_path, function(key, val){ html += val +"
"; }) $(".ajax-reply").html(html); } // ошибка else { console.log("ОШИБКА: " + respond.error); } }, // функция ошибки ответа сервера error: function(jqXHR, status, errorThrown){ console.log("ОШИБКА AJAX запроса: " + status, jqXHR); } }); });

Шаг 3. Обрабатываем запрос: загружаем файлы на сервер

Теперь последний шаг: нужно обработать отправленный запрос.

Чтобы было наглядно обработаем запрос без дополнительных проверок для файлов, т.е. просто сохраним полученные файлы в нужную папку. Хотя, для безопасности, отправляемые файлы обязательно нужно проверять, хотя бы расширение (тип) файла...

Создадим файл submit.php с таким кодом (предполагается что submit.php лежит в той же папке, где и файл, с которого отправляется AJAX запрос):

jQuery(document).ready(function($){ // ссылка на файл AJAX обработчик var ajaxurl = ""; var nonce = ""; var files; // переменная. будет содержать данные файлов // заполняем переменную данными, при изменении значения поля file $("input").on("change", function(){ files = this.files; }); // обработка и отправка AJAX запроса при клике на кнопку upload_files $(".upload_files").on("click", function(event){ event.stopPropagation(); // остановка всех текущих JS событий event.preventDefault(); // остановка дефолтного события для текущего элемента - клик для тега // ничего не делаем если files пустой if(typeof files == "undefined") return; // создадим данные файлов в подходящем для отправки формате var data = new FormData(); $.each(files, function(key, value){ data.append(key, value); }); // добавим переменную идентификатор запроса data.append("action", "ajax_fileload"); data.append("nonce", nonce); data.append("post_id", $("body").attr("class").match(/postid-(+)/)); var $reply = $(".ajax-reply"); // AJAX запрос $reply.text("Загружаю..."); $.ajax({ url: ajaxurl, type: "POST", data: data, cache: false, dataType: "json", // отключаем обработку передаваемых данных, пусть передаются как есть processData: false, // отключаем установку заголовка типа запроса. Так jQuery скажет серверу что это строковой запрос contentType: false, // функция успешного ответа сервера success: function(respond, status, jqXHR){ // ОК if(respond.success){ $.each(respond.data, function(key, val){ $reply.append(""); }); } // error else { $reply.text("ОШИБКА: " + respond.error); } }, // функция ошибки ответа сервера error: function(jqXHR, status, errorThrown){ $reply.text("ОШИБКА AJAX запроса: " + status); } }); }); })