1

Доброго времени суток друзья.

Есть страница добавления объявления, в зависимости от выбранного радио-баттона, показывается блок, код блока выглядит так:

     <div id="step4office" class="divAddObject alert-primary displayNone">
<form action="handlers/add_object.php" method="POST" enctype="multipart/form-data">        
        <div class="d-flex flex-start w-100">
            <div class="mr-2 hidden-md-down">
                <span class="icon-stack icon-stack-lg">
                    <i class="base base-2 icon-stack-3x opacity-100 color-primary-500"></i>
                    <i class="base base-2 icon-stack-2x opacity-100 color-primary-300"></i>
                    <i class="fal fa-info icon-stack-1x opacity-100 color-white"></i>
                </span>
            </div>
    <div class="d-flex flex-fill">
        <div class="flex-fill">
        <span class="h5 type-object-text">Введите данные объекта</span>

                <div class="divAddObjectInputs">
                    <label for="address">Адрес: </label>    
                    <input id="address" type="text" class="inputfilter shadow-inset-2" name="address" placeholder="Адрес">
                    <label for="metro">Метро: </label>
                    <input id="metro" type="text" class="inputfilter shadow-inset-2" name="metro" placeholder="Ближайшая станция метро">
                </div>

                <div class="divAddObjectInputs">
                    <label for="area">Площадь: </label>    
                    <input id="area" type="text" class="inputfilter shadow-inset-2" name="area" placeholder="м2">
                </div>

                <div class="divAddObjectInputs">
                    <label for="floor">Этаж: </label>    
                     <input type="text" class="inputfilter shadow-inset-2" aria-label="floorFrom" id="floorFrom" name="floorFrom">
                     <input type="text" class="inputfilter shadow-inset-2" aria-label="floorTo" id="floorTo" name="floorTo">
                </div>

                <div class="divAddObjectInputs">
                    <label for="legal">>Юридический адрес: </label>    
                    <input id="legal" type="text" class="inputfilter shadow-inset-2" name="legal" placeholder="Предоставляется">
                </div>

                <div class="divAddObjectInputs">
                    <label for="ceiling">Загрузить фото: </label>    
                    <input type="file" name="photos[]" multiple> <br>  <br>
                </div>              

                <input type="button" value="Отправить" />
</form>
        </div>
    </div>
        </div>
    </div>

Я хочу отправить на сервер данные с инпутами и файлы (мульти-загрузка).

JS выглядит так:

$(document).ready( function(){

  $("[type='button'][value='Отправить']").on('click', function(){
     // ОТПРАВЛЯЕМ ФОРМУ
        $.ajax({
                method: "POST",
                data: $(".divAddObject:visible form").serialize(),
                url: "handlers/add_object.php",
                success: function (data){
        $('.card-body div').after('Успешно добавлено');

                }
        });
  });

});

В итоге, если дебажить $_POST то видно, что без проблем передаются значения в полях, а вот $_FILES пустой. Подскажите пожалуйста, на моём примере, как мне отправить и инпуты и файлы одним запросом.

Заранее спасибо большое!

4
  • Если коротко, то для передачи файлов, можно использовать FormData. Чуть более подробно, можно посмотреть, например, в этой статейке
    – Deonis
    Commented 15 янв. 2020 в 15:56
  • Не могли бы пожалуйста на моём примере подсказать ? Или придётся переписывать всё ? По нажатию кнопки я не могу обработать это ? В вашем примере по отправке формы
    – Sice60
    Commented 15 янв. 2020 в 16:01
  • Там показывать особо нечего. Одну часть вам показал уже @Igor, если посмотрели статью, то должны были обнаружить еще два важных момента. Параметры: contentType: false и processData: false
    – Deonis
    Commented 15 янв. 2020 в 16:05
  • спасибо) решил проблему. Всего Вам доброго)
    – Sice60
    Commented 15 янв. 2020 в 16:08

2 ответа 2

0
data: new FormData($(".divAddObject:visible form")[0]),
0
0

введите сюда кодНужно указать в форме тег multiple="multiple" accept="image/*,image/jpeg" и убрать ковычки из name []

то есть вот так будет:

<input type="file" id="photos" name="photos" multiple="multiple" accept="image/*,image/jpeg">

Кнопка вот такая:

<input type="button" value="Отправить" onclick="send();" />

Скрипт вот такой:

<script>
function send(){
 var address = document.getElementById('address');
 var metro = document.getElementById('metro');
 var floorFrom = document.getElementById('floorFrom');
 var floorTo = document.getElementById('floorTo');
 var legal = document.getElementById('legal');
 var photos = document.getElementById('photos');
    $.ajax({
        type: "POST",
        data: "address =" + address + "&metro =" + metro + "&floorFrom =" + floorFrom + "&floorTo =" + "floorTo" + "&legal =" + "legal" + "&photos =" + "photos",
        url: "handlers/add_object.php",
        dataType: "text",
        success: function (data) {
            $('.card-body div').after('Успешно добавлено');
        },
    error: function(){
       alert( "К сожалению, во время обработки вашего запроса возникли технические проблемы, попробуйте ещё раз" );
    },
    });
}
</script>

Вот так будет работать!

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.