Як інтегрувати завантаження файлів Ajax у WordPress
Ви хочете реалізувати завантаження файлів Ajax у WordPress? Іноді вам потрібно виконати завдання, яке завантажує файл через Ajax. У цій статті ми вивчаємо, як виконувати завантаження файлів Ajax у WordPress.
Перевагою завантаження файлів через Ajax є зменшення навантаження на ваш сервер. Ваша сторінка не перезавантажиться, що економить додаткові дзвінки на сервер, а отже, і пропускну здатність. Це також покращує взаємодію з користувачем на вашому веб-сайті.
Зазвичай під час роботи з Ajax ми викликаємо URL-адресу та передаємо дані до вказаної URL-адреси або отримуємо дані з неї. WordPress має дещо інший спосіб виконання операцій Ajax. У WordPress ми дійсно викликаємо URL-адресу, але код, який ми пишемо для обробки даних, надходитиме у функцію. Тоді цій функції потрібно зіставити значення "action", передане в параметрах 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