Завантаження файлів Ajax за допомогою PHP та jQuery

Останнє оновлення Жов 17, 2021

Зміст

Навіщо потрібно завантаження файлів за допомогою Ajax?

Завантаження файлів за допомогою Ajax з PHP та jQuery

Шукаєте завантаження файлів за допомогою Ajax у PHP? Завантаження файлу через Ajax сьогодні є популярною подією. Це покращує взаємодію з користувачем на веб-сайті. У цій статті я покажу вам, як завантажувати файли через Ajax за допомогою PHP та jQuery.

Завантаження файлів / зображень – звичайне завдання розробників. Є кілька випадків, коли вам потрібно створити функцію завантаження файлів. Деякі з найпоширеніших прикладів – це завантаження фотографій профілю, слайдерів, відгуки, портфоліо, каруселі тощо.

Навіщо потрібно завантаження файлів за допомогою Ajax?

Основною причиною завантаження файлів через Ajax є те, що ви не хочете оновлювати сторінку після завантаження файлу. І це очевидно. Немає сенсу завантажувати цілу сторінку, якщо це не потрібно. Якщо ви завантажуєте сторінку після завантаження файлу, ви додаєте додаткове навантаження на сервер.

Завантаження файлів за допомогою Ajax зменшує непотрібне навантаження на сервер і забезпечує кращу взаємодію з користувачем на веб-сайті.

Тож без будь-яких подальших затримок почнемо з коду.

Завантаження файлів за допомогою Ajax з PHP та jQuery

Почнемо із створення форми, яка має введений файл та кнопку подати. Додайте наведений нижче HTML-код у свій файл, скажімо index.php.

<form>
    <p><input type="file" name="file" class="file" required></p>
    <input type="submit" name="submit" class="submit" value="Submit">
</form>

Оскільки я збираюся написати трохи коду JavaScript, я додав клас "файл" та "подати" відповідно до введення файлу та кнопки подання. Ці класи виконують роль ідентифікатора елементів форми.

Код JavaScript

Далі напишіть код JavaScript, який дасть виклик Ajax на сторону сервера та обробить відповідь.

<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script type="text/javascript">
    $(function() {
        $('.submit').on('click', function() {
            var file_data = $('.file').prop('files')[0];
            if(file_data != undefined) {
                var form_data = new FormData();                  
                form_data.append('file', file_data);
                $.ajax({
                    type: 'POST',
                    url: 'ajax.php',
                    contentType: false,
                    processData: false,
                    data: form_data,
                    success:function(response) {
                        if(response == 'success') {
                            alert('File uploaded successfully.');
                        } else {
                            alert('Something went wrong. Please try again.');
                        }
  
                        $('.file').val('');
                    }
                });
            }
            return false;
        });
    });
</script>

У наведеному вище коді JavaScript я надсилаю вміст ajax.phpфайлу у файл, а також обробляю відповідь.

Код PHP

На цьому етапі ми закінчили з надсиланням вмісту файлу на сторону сервера. Тепер створіть файл, в ajax.phpякому ми повинні написати PHP-код, який завантажує файли на сервер.

ajax.php

<?php
if (!file_exists('uploads')) {
    mkdir('uploads', 0777);
}
  
move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/'. $_FILES['file']['name']);
  
echo "success";
die();

Зазначений вище код PHP спочатку перевіряє наявність каталогу “uploads". Якщо цей каталог не існує, він створює його і завантажує файл всередину цієї папки.

Сподіваюся, тепер ви можете легко здійснити завантаження файлів за допомогою Ajax на своєму веб-сайті. Я хотів би почути ваші думки в розділі коментарів нижче.

Пов’язані статті

Джерело запису: artisansweb.net