Как сделать удалённую загрузку файлов в WordPress через AJAX с примерами

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

Почему AJAX для загрузки файлов в WordPress?

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

Однако загрузка файлов через AJAX требует соблюдения особенностей WordPress: безопасность, правильная обработка $_FILES, проверка прав и nonce для защиты от CSRF.

Подготовка: подключение скриптов и локализация

Для начала подключим JavaScript, который будет отправлять файл на сервер. В файле functions.php вашей темы или в плагине добавьте следующий код:

function wpbest_enqueue_scripts() {
    wp_enqueue_script('wpbest-ajax-upload', get_template_directory_uri() . '/js/ajax-upload.js', array('jquery'), null, true);
    wp_localize_script('wpbest-ajax-upload', 'wpbest_ajax_object', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce'    => wp_create_nonce('wpbest_file_upload_nonce')
    ));
}
add_action('wp_enqueue_scripts', 'wpbest_enqueue_scripts');

Здесь мы подключаем скрипт ajax-upload.js и передаём ему URL для AJAX-запросов и nonce для безопасности.

Пример JavaScript для отправки файла

Создайте в вашей теме файл js/ajax-upload.js со следующим содержимым:

jQuery(document).ready(function($) {
    $('#wpbest-upload-form').on('submit', function(e) {
        e.preventDefault();

        var fileInput = $('#wpbest-file')[0];
        if (!fileInput.files.length) {
            alert('Пожалуйста, выберите файл');
            return;
        }

        var formData = new FormData();
        formData.append('action', 'wpbest_handle_file_upload');
        formData.append('security', wpbest_ajax_object.nonce);
        formData.append('file', fileInput.files[0]);

        $.ajax({
            url: wpbest_ajax_object.ajax_url,
            type: 'POST',
            data: formData,
            contentType: false,
            processData: false,
            success: function(response) {
                if(response.success) {
                    $('#wpbest-upload-result').html('Файл успешно загружен: ' + response.data.url);
                } else {
                    $('#wpbest-upload-result').html('Ошибка: ' + response.data);
                }
            },
            error: function() {
                $('#wpbest-upload-result').html('Произошла ошибка при загрузке файла.');
            }
        });
    });
});

Этот скрипт обрабатывает отправку формы, проверяет наличие файла, формирует FormData и отправляет запрос на сервер.

Обработка загрузки на сервере

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

function wpbest_handle_file_upload() {
    check_ajax_referer('wpbest_file_upload_nonce', 'security');

    if (empty($_FILES['file'])) {
        wp_send_json_error('Файл не был загружен');
    }

    $file = $_FILES['file'];

    // Проверим тип файла (например, разрешим только изображения)
    $allowed_types = array('image/jpeg', 'image/png', 'image/gif');
    if (!in_array($file['type'], $allowed_types)) {
        wp_send_json_error('Недопустимый тип файла. Разрешены только jpeg, png, gif');
    }

    // Используем встроенную функцию WordPress для загрузки файла
    require_once(ABSPATH . 'wp-admin/includes/file.php');
    $overrides = array('test_form' => false);
    $movefile = wp_handle_upload($file, $overrides);

    if ($movefile && !isset($movefile['error'])) {
        wp_send_json_success(array('url' => esc_url($movefile['url'])));
    } else {
        wp_send_json_error($movefile['error']);
    }
}
add_action('wp_ajax_wpbest_handle_file_upload', 'wpbest_handle_file_upload');
add_action('wp_ajax_nopriv_wpbest_handle_file_upload', 'wpbest_handle_file_upload');

Функция проверяет nonce, тип файла, а затем использует wp_handle_upload для безопасного сохранения. В случае успеха возвращается URL загруженного файла.

Создание HTML формы для загрузки

Чтобы пользователь мог выбрать файл, добавьте на страницу следующую форму:

<form id="wpbest-upload-form" enctype="multipart/form-data">
    <input type="file" id="wpbest-file" name="file" accept="image/*" required />
    <button type="submit">Загрузить файл</button>
</form>
<div id="wpbest-upload-result"></div>

Форма содержит поле выбора файла и кнопку отправки. Результат загрузки отображается в блоке с id wpbest-upload-result.

Дополнительные советы по безопасности и оптимизации

Валидация файлов и ограничение размера

Очень важно ограничивать типы и размер файлов. В wp_handle_upload можно добавить проверку размера файла через PHP-конфигурацию или вручную:

if ($file['size'] > 2 * 1024 * 1024) { // 2 МБ
    wp_send_json_error('Файл слишком большой. Максимум 2 МБ');
}

Также можно использовать плагин Clearfy Pro, который расширяет возможности безопасности и фильтрации загружаемых файлов. Подробнее о нем можно узнать на wpshop.ru.

Отображение прогресса загрузки

Для улучшения UX можно добавить индикатор прогресса с использованием события XMLHttpRequest.upload.onprogress. Вот простой пример для ajax-upload.js:

$.ajax({
    url: wpbest_ajax_object.ajax_url,
    type: 'POST',
    data: formData,
    contentType: false,
    processData: false,
    xhr: function() {
        var xhr = new window.XMLHttpRequest();
        xhr.upload.addEventListener('progress', function(evt) {
            if (evt.lengthComputable) {
                var percentComplete = evt.loaded / evt.total * 100;
                $('#wpbest-upload-result').text('Загрузка: ' + Math.round(percentComplete) + '%');
            }
        }, false);
        return xhr;
    },
    success: function(response) {
        if(response.success) {
            $('#wpbest-upload-result').html('Файл успешно загружен: ' + response.data.url);
        } else {
            $('#wpbest-upload-result').html('Ошибка: ' + response.data);
        }
    },
    error: function() {
        $('#wpbest-upload-result').html('Произошла ошибка при загрузке файла.');
    }
});

Заключение

Удалённая загрузка файлов через AJAX в WordPress — практичное решение для современных сайтов. Следуйте инструкциям, используйте nonce для безопасности, проверяйте типы и размер файлов, и вы получите удобный функционал без перезагрузки страниц.

Если хотите расширить функционал, обратите внимание на плагины с расширенными возможностями безопасности и оптимизации, например, Clearfy Pro.