Отправка фалов form на сервер через Ajax

285
28 марта 2018, 03:51

Здравствуйте. У меня такая проблема, есть форма html в ней определенные поля. Когда отправляю данные, то данные всех полей отправляются, кроме поля где передается файл. Только начал изучать ajax. Прошу помогите.

Форма HTML

<form method="post" id="add" name="add" enctype="multipart/form-data">
    <div class="row form-field">
        <label class="col-lg-2" for="logo">Добавить лого</label>
        <input class="col-lg-5" type="file" id="logo" name="logo">
    </div>
    <div class="row form-field">
        <label class="col-lg-2" for="name-shop">Название магазина</label>
        <input class="col-lg-5" type="text" id="name-shop" name="name-shop">
    </div>
    <div class="row form-field">
        <label class="col-lg-2" for="description">Описание магазина</label>
        <textarea class="col-lg-5" id="description" name="description" cols="30" rows="10"></textarea>
    </div>
    <div class="row form-field">
        <label class="col-lg-2" for="date-create">Дата создания</label>
        <input class="col-lg-5" type="text" id="date-create" name="date-create">
    </div>
    <input type="button" name="btn_add" id="btn_add" value="Добавить">
</form>

Обработчик PHP

 $name_shop   = $_POST['name-shop'];
 $description = $_POST['description'];
 $description = $_POST['description'];
 $date        = $_POST['date-create'];
 $logo        = $_FILES['logo'];
 $logo_path   = upload_logo( $logo );
 if ( isset( $name_shop ) && isset( $description ) && isset( $date ) ) {
    $query = "INSERT INTO shops (logo, name_shop, description, date_create)". 
             "VALUES ('$logo_path', '$name_shop', '$description', '$date')";
    $res   = array(
        'name_shop'   => $name_shop,
        'description' => $description,
        'date'        => $date,
        'logo_path'   => $logo_path
    );
    // Переводим массив в JSON
    echo json_encode( $res );
 }
function upload_logo( $logo ) {
    $upload_dir = 'img/';
    $tmp_name = $_FILES['logo']['tmp_name'];
    if ( move_uploaded_file( $tmp_name, $upload_dir . $logo['name'] ) ) {
        return realpath( $upload_dir . $logo['name'] );
    } else {
        return false;
    }
}

Ajax.js код

$(document).ready(function () {
    $("#btn_add").click(function () {
        sendAjaxForm('add', '../php/set_data.php');
        return false;
    });
});
function sendAjaxForm(ajax_form, url) {
    $.ajax({
        url: url,
        type: 'POST',
        dataType: 'text',
        data: $("#" + ajax_form).serialize(),
        success: function (response) {
            var result = $.parseJSON(response);
            if (result.name_shop === '') {
                 alert("Заполните поле ");
            } else if (result.description === '') {
                 alert("Заполните поле 'Описание магазина'");
            } else if (result.date === '') {
                 alert("Заполните поле 'Дата открытия магазина'");
            } else {
                 alert("Магазин '" + result.name_shop + "' успешно добавлен");
                 location.reload(true);
            }
        },
        error: function () { // Данные не отправлены
            alert('Ошибка. Данные не отправлены.');
        }
    });
}
Answer 1

$().serialize() не включает данные файлов. Используйте FormData.

    data: new FormData($("#" + ajax_form)[0]),

https://developer.mozilla.org/en-US/docs/Web/API/FormData

READ ALSO
Редирект из поисковой выдачи на левый сайт

Редирект из поисковой выдачи на левый сайт

Добрый день, при переходе из выдачи яндекса на мой сайт alexpromru

320
Проверка на не заполненные поля&hellip;

Проверка на не заполненные поля…

Имеются поля для пк версии и мобверсии:

236
Не знаю как вывести текст из alert на html страницу. Помогите, пожалуйста

Не знаю как вывести текст из alert на html страницу. Помогите, пожалуйста

ЗдравствуйтеЯ хотел бы узнать как вывести текст на html страницу, который находится в alert (возможно я не правильно выражаюсь)

265