Загрузка файлов на сервер с помощью jQuery AJAX
Как загружать файлы, например изображения, на сервер, используя AJAX и jQuery? Это делается достаточно просто! В этой статье мы подробно рассмотрим все шаги.
В прошлом, когда jQuery не существовал, или браузеры были не так развиты, загрузка файла на сайт с помощью AJAX могла быть сложной задачей: приходилось использовать различные ухищрения, такие как iframe. Но сейчас процесс загрузки файлов стал намного проще. Даже новичок в программировании сможет разобраться, что и куда вставлять. Эта статья поможет вам в этом. Если дополнить эти возможности функциями WordPress, безопасная обработка и загрузка файлов на сервер станет еще проще и интереснее (вы можете увидеть пример на WordPress в конце статьи).
Тем не менее, не забывайте, что вам понадобится хотя бы базовый опыт работы с файлами и знание Javascript, jQuery и PHP. Важно понимать, как происходит загрузка файлов на сервер и как работает AJAX.
Представленный ниже метод довольно стабильный и основывается на объекте Javascript new FormData(), который поддерживается во всех современных браузерах.
Чтобы лучше понять материал, мы разделим его на шаги. Итак, начнем...
Содержание:
- Общий пример загрузки файлов с помощью AJAX
- Шаг 1. Получаем данные из поля для файлов
- Шаг 2. Создаем AJAX-запрос (по клику)
- Шаг 3. Обрабатываем запрос: загружаем файлы на сервер
- Пример загрузки файлов для WordPress
ОБЩИЙ ПРИМЕР ЗАГРУЗКИ ФАЙЛОВ С ПОМОЩЬЮ AJAX
Всё начинается с того, что на сайте должно быть поле ввода типа file. При этом это поле не обязательно должно быть частью формы (<form>).
Вот пример HTML-кода с полем для файлов и кнопкой "Загрузить файлы":
Загрузить файлы
ШАГ 1. ПОЛУЧАЕМ ДАННЫЕ ИЗ ПОЛЯ ДЛЯ ФАЙЛОВ
Первый шаг — получить данные о файлах, которые нужно загрузить.
При нажатии на поле для файлов открывается окно выбора, и после выбора данные о файлах сохраняются в этом поле. Нам нужно "забрать" их оттуда. Для этого мы привяжем функцию JavaScript к событию изменения, которая сохранит данные из поля для файлов в переменную files:
var files; // переменная будет содержать данные файла
// заполняем переменную данными при изменении значения поля
jQuery('input[type=file]').on('change', function(){
files = this.files;
});ШАГ 2. СОЗДАЁМ AJAX-ЗАПРОС (ПО КЛИКУ)
У нас есть данные о файлах, теперь нужно отправить их через AJAX. Мы привязываем это событие к клику на кнопку "Загрузить файлы".
В момент нажатия мы создаем новый объект new FormData() и добавляем данные из переменной files в него. Используя FormData(), мы можем быть уверены, что отправляемые данные выглядят так, как если бы мы просто отправили форму в браузере.
Затем мы создаем нестандартный AJAX-запрос, в котором передаем файлы в стандартном формате для сервера: $_FILES.
Для создания такого запроса в jQuery нам нужно установить дополнительные параметры, так что привычная функция $.post() здесь не подойдёт, и мы используем более гибкий вариант: $.ajax().
Два важных параметра нужно установить в значение false:
-
processData: отключает обработку передаваемых данных. По умолчанию jQuery собирает данные в строку запроса и добавляет её в URL. Для POST-запросов он выполняет другие преобразования. Изменение оригинальных данных может вызвать проблемы, поэтому мы отключаем эту опцию. -
contentType: отключает установку заголовка типа запроса. По умолчанию jQuery устанавливает"application/x-www-form-urlencoded". Этот заголовок не позволяет загружать файлы. Если установить его в"multipart/form-data", PHP не сможет распознать переданные данные и выдаст предупреждение. Самый простой вариант — отключить эту опцию, и всё будет работать!
// обработка и отправка AJAX-запроса по клику на кнопку upload_files
jQuery('.upload_files').on('click', function(event){
event.stopPropagation(); // останавливает все текущие JS события
event.preventDefault(); // останавливает стандартное событие для текущего элемента
// ничего не делаем, если переменная files пуста
if (typeof files === 'undefined') return;
// создаем объект FormData
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, // отключаем обработку переданных данных
contentType: false, // отключаем установку заголовка типа запроса
success: function(respond, status, jqXHR) {
// если всё прошло успешно
if (typeof respond.error === 'undefined') {
// выводим пути загруженных файлов
var files_path = respond.files;
var html = '';
$.each(files_path, function(key, val){
html += val + '
';
});
$('.ajax-reply').html(html);
} else {
console.log('ERROR: ' + respond.data);
}
},
error: function(jqXHR, status, errorThrown) {
console.log('AJAX запрос ERROR: ' + status, jqXHR);
}
});
});ШАГ 3. ОБРАБАТЫВАЕМ ЗАПРОС: ЗАГРУЖАЕМ ФАЙЛЫ НА СЕРВЕР
Теперь последний шаг: нам нужно обработать присланный запрос.
Чтобы было проще, мы обработаем запрос без дополнительных проверок для файлов и просто сохраним полученные файлы в нужной папке. Тем не менее, для безопасности загруженные файлы все-таки нужно проверять, хотя бы по типу файла.
Создадим файл submit.php со следующим кодом (предполагается, что submit.php находится в той же папке, откуда отправляется AJAX-запрос):
$done_files) : array('error' => 'Ошибка загрузки файла.');
die(json_encode($data));
}Это всё!
Важно! Этот код только демонстрирует, как получать и сохранять файлы. На самом деле, вам нужно проверить форматы загружаемых файлов, их размер, транслитерировать кириллические названия и, возможно, выполнять некоторые другие проверки.
ПРИМЕР ЗАГРУЗКИ ФАЙЛОВ ДЛЯ WORDPRESS
В WordPress обработка AJAX-запросов гораздо проще, потому что есть готовые функции, например, media_handle_upload().
Первые два шага аналогичны, а в третьем шаге мы используем встроенную функцию, которая добавляет файл в медиатеку и связывает его с текущим постом.
Чтобы код ниже работал, его нужно добавить в файл functions.php вашей темы. Затем создайте страницу с ЧПУ ajax_file_upload и перейдите на неё. В контенте вы увидите форму для добавления файла. Выберите файлы и проверьте, загружаются ли они...
post_name !== 'ajax_file_upload') return $text;
return $text .= '
';
}
// JS код
function ajax_file_upload_jscode() {
?>
$max_size || $sizedata[1] /*высота*/ > $max_size)
wp_send_json_error(__('Изображение не может быть больше '. $max_size .' пикселей по ширине или высоте...','km'));
// обрабатываем загрузку файла
require_once ABSPATH . 'wp-admin/includes/image.php';
require_once ABSPATH . 'wp-admin/includes/file.php';
require_once ABSPATH . 'wp-admin/includes/media.php';
// фильтруем допустимые типы файлов - разрешаем только изображения
add_filter('upload_mimes', function($mimes) {
return [
'jpg|jpeg|jpe' => 'image/jpeg',
'gif' => 'image/gif',
'png' => 'image/png',
];
});
$uploaded_imgs = array();
foreach ($_FILES as $file_id => $data) {
$attach_id = media_handle_upload($file_id, $post_id);
// ошибка
if (is_wp_error($attach_id))
$uploaded_imgs[] = 'Ошибка при загрузке файла '. $data['name'] .': '. $attach_id->get_error_message();
else
$uploaded_imgs[] = wp_get_attachment_url($attach_id);
}
wp_send_json_success($uploaded_imgs);
}Теперь вы имеете представление о том, как загружать файлы на сервер с использованием AJAX и jQuery в контексте WordPress. Следуйте приведенным шагам, и у вас все получится!