Hello. I have such a problem, there is a form html in it certain fields. When I send data, the data of all fields are sent, except for the field where the file is transmitted. Just started learning ajax. Please help.

HTML form

<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 handler

  $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 code

 $(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('Ошибка. Данные не отправлены.'); } }); }

    1 answer 1

    $().serialize() does not include file data. Use FormData .

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

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