AJAX загрузка файлов - TypeError: ajaxSubmit() не является функцией

25 сент. 2014 г., 19:36:56
Просмотры: 15.2K
Голосов: 0

У меня есть плагин, который работает как стандартный POST-запрос, но не работает как AJAX POST-запрос.

Я получаю ошибку "не является функцией" в Firebug с этой функцией:

TypeError: jQuery(...).ajaxSubmit is not a function

jQuery(this).ajaxSubmit(options);

Это решение помогло: http://codeimpossible.com/2010/01/13/solving-document-ready-is-not-a-function-and-other-problems/

( function($) {

} ) ( jQuery );

Это JS-файл, который подключается с моим плагином - он загружается в заголовке:

jQuery(document).ready(function(){

        var options = { 
            target:         '#output',   // целевой элемент(ы) для обновления ответом сервера
            beforeSubmit:   beforeSubmit,  // callback перед отправкой
            success:        afterSuccess,  // callback после успешной отправки
            uploadProgress: OnProgress, // callback прогресса загрузки
            resetForm:      true        // сбросить форму после успешной отправки    
        }

    jQuery('#nanny_app_upload').on('submit', function(e) {
                e.preventDefault();

                alert('jQuery submit вызван');            
                jQuery(this).ajaxSubmit(options);
                alert('jQuery post submit'); 
                // всегда возвращаем false для предотвращения стандартной отправки браузером
                alert('Получено от сервера: ' + response);
                return false;
    });


//функция после успешной загрузки файла (когда получен ответ сервера)
function afterSuccess(){

    alert('jQuery afterSuccess');
    jQuery('#submit-btn').show(); //показать кнопку отправки
    jQuery('#loading-img').hide(); //скрыть индикатор загрузки
    jQuery('#progressbox').delay( 1000 ).fadeOut(); //скрыть прогресс-бар
}

//функция для проверки размера файла перед загрузкой
function beforeSubmit(){

    alert('jQuery beforeSubmit');
    jQuery('#submit-btn').hide(); //скрыть кнопку отправки
    jQuery('#loading-img').show(); //показать индикатор загрузки
    jQuery("#output").html("");
}

//функция прогресс-бара
function OnProgress(event, position, total, percentComplete)
{
    //Прогресс-бар
    alert('jQuery OnProgress');
    jQuery('#progressbox').show();
    jQuery('#statustxt').show();
    jQuery('#progressbar').width(percentComplete + '%') //обновить процент завершения
    jQuery('#statustxt').html(percentComplete + '%'); //обновить текст статуса
    if(percentComplete>50)
        {
            jQuery('#statustxt').css('color','#000'); //изменить цвет текста после 50%
        }
}

});  

Вот форма, которая генерируется из дочерней темы:

//Форма загрузки для нянь
add_action("action_nannie_upload_form", "do_action_nannie_upload_form");

function do_action_nannie_upload_form()
{   
    $url = plugins_url();
    $plugins_url = $url . "/nannie-app/";
    ?><br>
    Форма загрузки!<br>
    <form action="<?php echo admin_url('admin-ajax.php'); ?>" 
    method="post" enctype="multipart/form-data" id="nannie_app_upload">
    <br>
        <?php wp_nonce_field('nannie_app_upload','nannie_upload_ajax_nonce'); ?>  
        <!-- Добавить новый файл -->  
        <span class="btn btn-file">Выбрать файл: 
        <input name="FileInput" id="FileInput" type="file" /></span>                
        <button type="submit" class="btn" id="submit-btn">Загрузить</button>                         
    </form>

    <img src="<?php echo $plugins_url; ?>images/ajax-loader.gif" id="loading-img"
    style="display:none;" alt="Пожалуйста, подождите"/>
    <div id="progressbox" style="display:none;"><div id="progressbar"></div >
    <div id="statustxt">0%</div></div>
    <div id="output"></div>
    <br>
    <br>                    
    <hr/>
<script src="<?php echo get_stylesheet_directory_uri(); ?>/plugins/form/jquery.form.js"></script>
<script src="<?php echo get_stylesheet_directory_uri(); ?>/plugins/uload/ajaxFileUpload.js"></script> 

<?php 
}

И вот действие, которое вызывается при отправке формы. Если я убираю проверку AJAX-заголовков, файл загружается, но меня перенаправляет на пустую страницу.

add_action("wp_ajax_nopriv_nannie_app_upload", "nannie_app_upload");

function nannie_app_upload(){
    global $wpdb;   

    if(isset($_FILES["FileInput"])){
        log_me("nannie_app_upload: FileInput найден");

    if (!isset( $_POST['nannie_upload_ajax_nonce']) || 
       !wp_verify_nonce($_POST['nannie_upload_ajax_nonce'], 'nannie_app_upload')){
       print 'Извините, ваша nonce-проверка не прошла.';
       log_me("nannie_app_upload: nonce не прошла проверку");
       exit;
    }

    if (!isset($_SERVER['HTTP_X_REQUESTED_WITH'])){
        if(isset($_SESSION["naap_app_uid"])){
             $app_uid = $_SESSION["naap_app_uid"];
        }
        log_me('nannie_app_upload: AJAX не вызван #' . $app_uid);
        die();
    }

    //Проверка размера файла
    if ($_FILES["FileInput"]["size"] > 5242880) {
        log_me('nannie_app_upload: Размер файла слишком большой! #' . $app_uid);
        die("Размер файла слишком большой!");
    }       

    $_SESSION["naap_app_uid"] = $app_uid;    
    $UploadDirectory = WP_PLUGIN_DIR."/nannie-app/tmp/" . $app_uid . "/";

        ////////////////////////////////////////////////////
        //http://www.saaraan.com/2012/06/ajax-file-upload-with-php-and-jquery

        if (!@file_exists($UploadDirectory)) {
                //папка назначения не существует
            if(!is_dir($UploadDirectory)) {
                mkdir($UploadDirectory);
                if (!@file_exists($UploadDirectory)) {

                    log_me('nannie_app_upload: Отсутствует директория для AJAX загрузки #' . $app_uid);
                    die("Убедитесь, что директория загрузки существует!");

                }
            }
        }

        //проверка разрешенных типов файлов на сервере
        switch(strtolower($_FILES['FileInput']['type']))
        {
                //разрешенные типы файлов
                case 'image/png': //png файл
                case 'image/gif': //gif файл 
                case 'image/jpeg': //jpeg файл
                case 'application/pdf': //PDF файл
                case 'application/msword': //файл Word
                case 'application/vnd.ms-excel': //файл Excel
                case 'application/x-zip-compressed': //zip архив
                case 'text/plain': //текстовый файл
                case 'text/html': //html файл

                        //Название файла будет использовано как новое имя файла
                        $FileName       = strtolower($_FILES['FileInput']['name']); //имя загружаемого файла
                        $ImageExt       = substr($FileName, strrpos($FileName, '.')); //расширение файла              
                        $NewFileName    = substr($FileName, 0, strrpos($FileName, '.') ); //имя файла до случайного 

                        $FileType       = $_FILES['FileInput']['type']; //тип файла
                        $FileSize       = $_FILES['FileInput']["size"]; //размер файла

                        $RandNumber     = rand(0, 9999999999); //Случайное число для уникальности имени файла
                        $uploaded_date  = date("Y-m-d H:i:s");

                        $NewFileName = preg_replace(array('/\s/', '/\.[\.]+/', '/[^\w_\.\-]/'), array('_', '.', ''), strtolower($NewFileName));
                        $NewFileName = $NewFileName.'_'.$RandNumber.$ImageExt;

                        //Переименовать и сохранить загруженный файл в папку назначения
                        if(move_uploaded_file($_FILES['FileInput']["tmp_name"], $UploadDirectory . $NewFileName )){
                                    //будущая SQL-вставка для записи загруженных файлов - новая таблица napp_applications_files
                                    log_me('nannie_app_upload: Успешная загрузка #' . $app_uid);
                                    die('Успех! Файл загружен.');
                                    break;

                        }else{
                                    log_me('nannie_app_upload: Ошибка загрузки #' . $app_uid);
                                    die('Ошибка загрузки файла!');
                                    break;
                        }            

                        break;
                default:
                        log_me('nannie_app_upload: Неподдерживаемый тип файла #' . $app_uid);
                        die('Неподдерживаемый тип файла!'); //ошибка - неподдерживаемый тип файла
                        break;
        }

    }else{
        log_me('nannie_app_upload: Что-то пошло не так с загрузкой! Проверьте "upload_max_filesize" #' . $app_uid);
        die('Что-то пошло не так с загрузкой! Проверьте "upload_max_filesize"');
    }
}
0
Все ответы на вопрос 2
2

ajaxSubmit не является основной функцией jQuery.

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

$.post(ajaxurl, data, function(response) {
    // функция обработки ответа
}

или с использованием jQuery ajax()

$.ajax({
    url: ajaxurl,
    data: data
});

Убедитесь, что у вас определена переменная ajaxurl во фронтенде — в бэкенде WordPress определяет её автоматически.

Кстати, использование post() и есть использование AJAX, так как вы отправляете запрос асинхронно из браузера на сервер и затем обрабатываете результат. В этом и суть AJAX, даже если ваша функция не имеет названия с приставкой AJAX :)

26 сент. 2014 г. 10:18:39
Комментарии

Точно, ajaxSubmit действительно из jQuery form. Я попробовал добавить js плагин на одну страницу — просто для теста, но всё равно получаю ошибку "is not a function". Обновил js код выше, чтобы отразить текущие изменения.

jharrell jharrell
28 сент. 2014 г. 04:43:05

Похоже, ещё одна копия jQuery играла со мной в прятки... Нашёл проблемную тему и устранил её. Завернул свой код в защитную обёртку: ( function($) {

} ) ( jQuery );

Ошибок больше нет :-)

jharrell jharrell
28 сент. 2014 г. 05:05:46
1

Вам необходимо добавить jquery.form.min.js - у меня это сработало.

Надеюсь, это поможет и вам.

20 мая 2015 г. 13:50:36
Комментарии

Да, jQuery.form необходим - убедитесь, что другие экземпляры jQuery не перезаписывают сокращение $.

( function($) {

} ) ( jQuery );

jharrell jharrell
20 мая 2015 г. 17:02:07