Загрузка файла 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 >
    $(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 сначала проверяет каталог загрузок. Если этот каталог не существует, он создает его и загружает файл в эту папку.

Надеюсь, теперь вы можете легко реализовать загрузку файлов с помощью Ajax на своем веб-сайте. Я хотел бы услышать ваши мысли в разделе комментариев ниже.

Статьи по Теме

• Как загрузить сообщение WordPress с помощью AJAX
• Как использовать автозаполнение jQuery с Ajax
• Загрузка файла перетаскиванием с помощью JavaScript и PHP