AJAX загрузка файлов - TypeError: ajaxSubmit() не является функцией
У меня есть плагин, который работает как стандартный 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"');
}
}
ajaxSubmit
не является основной функцией jQuery.
Похоже, вам нужно либо подключить jQuery-плагин (например, этот), либо переписать свою функцию, используя синтаксис, подобный этому, с помощью jQuery post()
$.post(ajaxurl, data, function(response) {
// функция обработки ответа
}
или с использованием jQuery ajax()
$.ajax({
url: ajaxurl,
data: data
});
Убедитесь, что у вас определена переменная ajaxurl
во фронтенде — в бэкенде WordPress определяет её автоматически.
Кстати, использование post()
и есть использование AJAX, так как вы отправляете запрос асинхронно из браузера на сервер и затем обрабатываете результат. В этом и суть AJAX, даже если ваша функция не имеет названия с приставкой AJAX :)

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