0

У меня есть плагин custom-uploader-plugin. В нём есть файл custom-uploader-plugin.php с таким кодом:

<?php
/*
Plugin Name: Custom Uploader Plugin
Plugin URI: https://website.com
Description: Custom image uploader plugin.
Version: 1.0
Author: Man
Author URI: https://website.com
*/

// Enqueue JavaScript and CSS files
function custom_uploader_enqueue_scripts() {
    wp_enqueue_script('custom-uploader-script', plugin_dir_url(__FILE__) . './js/custom-uploader.js', array('jquery'), '1.0', true);
    wp_localize_script('custom-uploader-script', 'customUploaderAjax', array(
        'ajaxUrl' => admin_url('admin-ajax.php')
    ));
}
add_action('wp_enqueue_scripts', 'custom_uploader_enqueue_scripts');


// Handle image upload
function custom_uploader_upload_image() {
    if ($_FILES["image"]["error"] == UPLOAD_ERR_OK) {
        $temp_name = $_FILES["image"]["tmp_name"];
        $destination = wp_upload_dir()['basedir'] . '/' . $_FILES["image"]["name"];
        move_uploaded_file($temp_name, $destination);
        echo "Изображение успешно загружено!";
    } else {
        http_response_code(400); // Устанавливаем статус ошибки 400
        echo "Ошибка при загрузке изображения.";
    }
}

add_action('wp_ajax_custom_uploader_upload_image', 'custom_uploader_upload_image');
add_action('wp_ajax_nopriv_custom_uploader_upload_image', 'custom_uploader_upload_image');

// Shortcode for upload form
function custom_uploader_form_shortcode()
{
    ob_start();
?>
    <form id="uploadForm" enctype="multipart/form-data" action="<?php echo admin_url('admin-ajax.php'); ?>" method="post">
        <input type="file" name="image" id="image">
        <input type="submit" value="Загрузить">
    </form>
<?php
    return ob_get_clean();
}
add_shortcode('custom_uploader_form', 'custom_uploader_form_shortcode');

Также в папке плагина есть папка js, а в ней custom-uploader.js с кодом:

jQuery(document).ready(function ($) {
    function customUploader_uploadImage() {
        var formData = new FormData($("#uploadForm")[0]);
        $.ajax({
            url: customUploaderAjax.ajaxUrl,
            type: "POST",
            data: formData,
            processData: false,
            contentType: false,
            success: function (response) {
                console.log(response);
            },
            error: function (xhr) {
                console.log(xhr.responseText);
            }
        });
    }

    $("#uploadForm").on("submit", function (e) {
        e.preventDefault();
        customUploader_uploadImage();
    });
});

По задумке плагин создаёт шорткод, который содержит форму для загрузки изображений в папку /uploads/ в корне Wordpress. Но в итоге этого не происходит. В консоль выводятся ошибки: Unchecked runtime.lastError: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received и

POST http://localhost/wp-slider/wp-admin/admin-ajax.php 400 (Bad Request)

Изображение, естественно, не загружается в папку /uploads/ Перерыл уже весь интернет. Много примеров использования Ajax с Wordpress, но ни один не помогает. Буду очень благодарен, если вы сможете мне помочь

1 ответ 1

3

Естественно, 400. Где action в отправленных полях? Это поле должно содержать custom_uploader_upload_image. Тогда ядро найдёт ваш обработчик. А так ядро WP не понимает, какой именно обработчик Ajax-запроса подключать и отвечает 400.

Смотрите лучшее описание Ajax в WP тут. И вообще, все ответы надо искать на сайте wp-kama, это настоящая энциклопедия WordPress на русском.

2
  • Да, я использую эту энциклопедию, но там не написано конкретно про формы с Ajax wordpress. Вне wordpress, я использую обычно 2 файла для ajax-обработки форм, но в admin.php же по-другому всё 4 июн 2023 в 9:11
  • action добавляется так: data: { formData: formData, action: "custom_uploader_upload_image", }, ? 4 июн 2023 в 9:16

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.