Как загрузить файл в форму с помощью AJAX

Функция загрузки файлов на сайт является одной из самых используемых в Интернете. Обычно информация о форме отправляется в файл через PHP. Если вы хотите получить более удобный интерфейс, вы можете использовать jQuery и Ajax для загрузки файлов на сайт без необходимости обновлять страницу.

Объект FormData составляет набор пар ключ/значение для отправки с помощью XMLHttpRequest. В основном, FormData используется для отправки информации формы так же, как это делает метод submit(). Эти файлы могут быть представлены с помощью FormData и с включением входного файла внутри формы.

Вот план действий, по которому мы будем следовать в этом руководстве:

1. Отправьте файл изображения вместе с дополнительной информацией, используя jQuery и Ajax.
2. Загрузите изображение и добавьте другую информацию в базу данных с помощью PHP и MySQL

Создание таблицы в базе данных

Для хранения имени файла и другой информации нам необходимо создать таблицу в нашей базе данных. Следующий SQL создает таблицу form_data с некоторыми основными полями в нашей базе данных MySQL.

CREATE TABLE `form_data` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `name` varchar(100) COLLATE utf8_unicode_ci NOT NULL,
 `email` varchar(100) COLLATE utf8_unicode_ci NOT NULL,
 `file_name` varchar(100) COLLATE utf8_unicode_ci NOT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
Code language: JavaScript (javascript)

Настройка базы данных (dbConfig.php)

Мы будем использовать файл dbConfig.php для подключения к нашей базе данных с помощью PHP. Вам необходимо указать хост ($dbHost), имя пользователя ($dbUsername), пароль ($dbPassword) и имя базы данных ($dbName), т.е. учетные данные вашей базы данных.

<?php
//DB details
$dbHost = 'localhost';
$dbUsername = 'root';
$dbPassword = 'root';
$dbName = 'userbd';
//Создание соединения и выбор БД
$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);
if($db->connect_error){
    die("Невозможно подключить базу данных: " . $db->connect_error);
}
Code language: HTML, XML (xml)

Ajax загрузка файлов

HTML-код

Прежде всего, мы должны создать нашу HTML-форму. Пользователю нужно будет ввести свое имя, электронную почту и выбрать файл изображения.

<p class="statusMsg"></p>
<form enctype="multipart/form-data" id="fupForm" >
    <div class="form-group">
        <label for="name">ИМЯ</label>
        <input type="text" class="form-control" id="name" name="name" placeholder="Введите имя" required />
    </div>
    <div class="form-group">
      <label for="email">EMAIL</label>
        <input type="email" class="form-control" id="email" name="email" placeholder="Введите email" required />
    </div>
    <div class="form-group">
        <label for="file">Файл</label>
        <input type="file" class="form-control" id="file" name="file" required />
    </div>
    <input type="submit" name="submit" class="btn btn-danger submitBtn" value="Сохранить"/>
</form>
Code language: HTML, XML (xml)

Код Javascript

Мы будем использовать jQuery Ajax для отправки данных формы и прикрепленного файла изображения, поэтому нам потребуется включить библиотеку jQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Code language: HTML, XML (xml)

Используя объект FormData, мы отправим данные формы с помощью Ajax. Как только форма будет отправлена в PHP-файл с помощью Ajax, мы запустим процесс загрузки и покажем пользователю статус загрузки. Сначала мы проверим тип файла, чтобы отправлять только тот, который нам нужен.

<script>
$(document).ready(function(e){
    $("#fupForm").on('submit', function(e){
        e.preventDefault();
        $.ajax({
            type: 'POST',
            url: 'submit.php',
            data: new FormData(this),
            contentType: false,
            cache: false,
            processData:false,
            beforeSend: function(){
                $('.submitBtn').attr("disabled","disabled");
                $('#fupForm').css("opacity",".5");
            },
            success: function(msg){
                $('.statusMsg').html('');
                if(msg == 'ok'){
                    $('#fupForm')[0].reset();
                    $('.statusMsg').html('<span style="font-size:18px;color:#34A853">Данные формы успешно отправлены.</span>');
                }else{
                    $('.statusMsg').html('<span style="font-size:18px;color:#EA4335">Возникла проблема, пожалуйста, попробуйте еще раз.</span>');
                }
                $('#fupForm').css("opacity","");
                $(".submitBtn").removeAttr("disabled");
            }
        });
    });
    //Проверка типа файла
    $("#file").change(function() {
        var file = this.files[0];
        var imagefile = file.type;
        var match= ["image/jpeg","image/png","image/jpg"];
        if(!((imagefile==match[0]) || (imagefile==match[1]) || (imagefile==match[2]))){
            alert('Пожалуйста, выберите правильный файл изображения (JPEG/JPG/PNG).');
            $("#file").val('');
            return false;
        }
    });
});
</script>
Code language: HTML, XML (xml)

Загрузка файла и добавление данных в базу (submit.php)

Мы вызовем этот файл с помощью метода Ajax, который выполняет следующие действия:

• Загружает изображение на сервер (uploads/) с помощью функции move_uploaded_file().
• Вставляет информацию из формы в базу данных.
• Возвращает статус операции.

<?php
if(!empty($_POST['name']) || !empty($_POST['email']) || !empty($_FILES['file']['name'])){
    $uploadedFile = '';
    if(!empty($_FILES["file"]["type"])){
        $fileName = time().'_'.$_FILES['file']['name'];
        $valid_extensions = array("jpeg", "jpg", "png");
        $temporary = explode(".", $_FILES["file"]["name"]);
        $file_extension = end($temporary);
        if((($_FILES["hard_file"]["type"] == "image/png") || ($_FILES["file"]["type"] == "image/jpg") || ($_FILES["file"]["type"] == "image/jpeg")) && in_array($file_extension, $valid_extensions)){
            $sourcePath = $_FILES['file']['tmp_name'];
            $targetPath = "uploads/".$fileName;
            if(move_uploaded_file($sourcePath,$targetPath)){
                $uploadedFile = $fileName;
            }
        }
    }
    $name = $_POST['name'];
    $email = $_POST['email'];
    //Подключаем файл конфигурации базы данных
    include_once 'dbConfig.php';
    //Добавление данных формы в базу данных
    $insert = $db->query("INSERT form_data (name,email,file_name) VALUES ('".$name."','".$email."','".$uploadedFile."')");
    echo $insert?'Все ок':'Ошибка';
}
Code language: HTML, XML (xml)