Как интегрировать загрузку файлов Ajax в WordPress
Вы хотите реализовать загрузку файлов Ajax в WordPress? Иногда вам нужно выполнить задачу по загрузке файла через Ajax. В этой статье мы изучаем, как загрузить файл Ajax в WordPress.
Преимущество загрузки файлов через Ajax заключается в том, что это снижает нагрузку на ваш сервер. Ваша страница не будет перезагружена, что сэкономит лишние вызовы на сервер и, следовательно, пропускную способность. Это также делает ваш сайт более удобным для пользователей.
Обычно при работе с Ajax мы вызываем URL-адрес и передаем или получаем данные по указанному URL-адресу. В WordPress есть несколько иной способ выполнения операций Ajax. В WordPress мы действительно вызываем URL-адрес, но код, который мы пишем для обработки данных, входит в функцию. Затем этой функции необходимо сопоставить значение «действия», переданное в параметрах Ajax. Смущенный? Посмотрим на это в действии.
Загрузка файла Ajax в WordPress
Для начала вам понадобится форма с файловым вводом. Мы вызываем Ajax для выбора файла и загружаем файл на сервер. Чтобы создать форму, добавьте приведенный ниже HTML-код в шаблон страницы.
<form class="fileUpload" enctype="multipart/form-data">
<div class="form-group">
<label><?php _e('Choose File:'); ?></label>
<input type="file" id="file" accept="image/*" />
</div>
</form>Затем вы должны вызвать Ajax-вызов в событии изменения ввода файла. Поскольку мы передаем содержимое файла в Ajax, ваш код будет немного отличаться от обычного кода jQuery WordPress Ajax.
Включить файл JS в WordPress
Давайте сначала включим файл JS в среду WordPress. Этот код войдет в functions.phpфайл или в плагин для конкретного сайта.
function aw_scripts() {
// Register the script
wp_register_script( 'aw-custom', get_stylesheet_directory_uri(). '/js/custom.js', array('jquery'), '1.1', true );
// Localize the script with new data
$script_data_array = array(
'ajaxurl' => admin_url( 'admin-ajax.php' ),
);
wp_localize_script( 'aw-custom', 'aw', $script_data_array );
// Enqueued script with localized data.
wp_enqueue_script( 'aw-custom' );
}
add_action( 'wp_enqueue_scripts', 'aw_scripts' );Загрузить файл на сервер
Вы готовы с формой и файлом JS. Теперь добавьте приведенный ниже код в файл JS, который будет отправлять содержимое файла на сервер через Ajax.
custom.js
jQuery(function($) {
$('body').on('change', '#file', function() {
$this = $(this);
file_data = $(this).prop('files')[0];
form_data = new FormData();
form_data.append('file', file_data);
form_data.append('action', 'file_upload');
$.ajax({
url: aw.ajaxurl,
type: 'POST',
contentType: false,
processData: false,
data: form_data,
success: function (response) {
$this.val('');
alert('File uploaded successfully.');
}
});
});
});Важной частью приведенного выше кода является то, что мы добавляем действие file_upload к объекту form_data. Мы будем использовать это действие file_upload, чтобы продолжить работу с данными формы.
В functions.php, сопоставьте это действие с Ajax следующим образом:
add_action( 'wp_ajax_file_upload', 'file_upload_callback' );
add_action( 'wp_ajax_nopriv_file_upload', 'file_upload_callback' );Если вы пишете этот код в виде плагина, вам не нужно писать второй оператор. Здесь к «wp ajax_» и «wp_ajax_nopriv» мы добавляем значение действия «file_upload». Второй параметр file_upload_callback – это метод обратного вызова, который будет иметь фактический код для загрузки файла.
function file_upload_callback() {
$arr_img_ext = array('image/png', 'image/jpeg', 'image/jpg', 'image/gif');
if (in_array($_FILES['file']['type'], $arr_img_ext)) {
$upload = wp_upload_bits($_FILES["file"]["name"], null, file_get_contents($_FILES["file"]["tmp_name"]));
//$upload['url'] will gives you uploaded file path
}
wp_die();
}Я использую метод wp_upload_bits для загрузки файла на сервер. Этот метод напрямую сохраняет файл в каталоге wp-content / uploads.
Продолжайте и попробуйте загрузить файл. Ваш файл должен быть загружен в папку wp-content / uploads /. Помните, что вы найдете свой файл в папке текущего месяца в каталоге загрузок.
Загрузить несколько файлов с помощью Ajax в WordPress
До сих пор мы обсуждали загрузку одного файла через Ajax. Может возникнуть ситуация, когда вы захотите загрузить несколько файлов с помощью Ajax. Посмотрим, как этого добиться.
Для загрузки нескольких файлов вам необходимо внести небольшие изменения в приведенный выше код HTML, JS и PHP.
HTML предоставляет атрибут «несколько», который позволяет пользователю выбирать несколько файлов при вводе файла.
HTML код
<form class="fileUpload" enctype="multipart/form-data">
<div class="form-group">
<label><?php _e('Choose File:'); ?></label>
<input type="file" id="file" accept="image/*" multiple />
</div>
</form>Поскольку пользователь собирается выбрать несколько файлов, нам необходимо изменить код JavaScript, который перебирает каждый файл и строит из него массив.
custom.js
jQuery(function($) {
$('body').on('change', '#file', function() {
$this = $(this);
file_obj = $this.prop('files');
form_data = new FormData();
for(i=0; i<file_obj.length; i++) {
form_data.append('file[]', file_obj[i]);
}
form_data.append('action', 'file_upload');
$.ajax({
url: aw.ajaxurl,
type: 'POST',
contentType: false,
processData: false,
data: form_data,
success: function (response) {
$this.val('');
alert('File(s) uploaded successfully.');
}
});
});
});И, наконец, в функции обратного вызова Ajax мы перебираем массив файлов и загружаем каждый файл на сервер.
function file_upload_callback() {
$arr_img_ext = array('image/png', 'image/jpeg', 'image/jpg', 'image/gif');
for($i = 0; $i < count($_FILES['file']['name']); $i++) {
if (in_array($_FILES['file']['type'][$i], $arr_img_ext)) {
$upload = wp_upload_bits($_FILES['file']['name'][$i], null, file_get_contents($_FILES['file']['tmp_name'][$i]));
//$upload['url'] will gives you uploaded file path
}
}
wp_die();
}Надеюсь, вы узнали о загрузке файла Ajax в WordPress. Я хотел бы услышать ваши мысли и предложения в разделе комментариев ниже.
Статьи по Теме
- Как загрузить сообщение WordPress с помощью AJAX
- Как использовать jQuery Ajax в WordPress
- Загрузка файла перетаскиванием с помощью JavaScript и PHP