Как отправить несколько данных и несколько фото одновременно?

Question

[Альберт]

Привет. у меня есть форма которую я отправляю через jquery, затем улетает в php обработчик, все это сейчас работает. Но мне ко всему этому нужно добавить еще отправку нескольких фото. Как это сделать правильнее? как я понял нужно отправлять через form Data, но как это совместить, вот код.

$(document).ready(function()  {
      $('#reviews_form').submit(function(e) {
  
  
   // var $form = $(this);
    var rating = $('#rating').val();
    var comment = $('#comment').val();
    var phone = $('#phone').val();
     var plus = $('#plus').val();
      var minus = $('#minus').val();
     
          
var formData = new FormData();
form_data.append('file', file_data);

         $.ajax({
         type: 'POST',
         url: 'reviews-add.php',
         data: $form.serialize(),
         success: function(data) { 
if (data.includes('error_subscribe')) {
   
} else { 

}
         }
        })
        e.preventDefault(); 
      });
    });

Answer 1

[Paul14]

Вот пример кода функции jQuery AJAX для отправки множества фотографий через FormData в обработчик PHP:

function uploadPhotos() {
    var formData = new FormData();
    var photos = $('#fileInput')[0].files; // получение массива выбранных файлов
    for (var i = 0; i < photos.length; i++) {
        formData.append('photos[]', photos[i]); // добавление фотографий в FormData
    }

    $.ajax({
        url: 'upload.php',
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {
            console.log(response);
            // Действия после успешной загрузки
        },
        error: function(xhr, status, error) {
            console.log(xhr.responseText);
            // Действия в случае ошибки
        }
    });
}

В приведенном коде предполагается, что у вас есть для выбора нескольких фотографий.

А вот пример кода PHP функции, принимающей массив фотографий и сохраняющей их на сервере:

<?php
if(isset($_FILES['photos'])) {
    $photos = $_FILES['photos'];
    $uploadedFiles = [];
    foreach($photos['tmp_name'] as $key => $tmp_name) {
        $file_name = $photos['name'][$key];
        $file_tmp = $photos['tmp_name'][$key];
        $file_type = $photos['type'][$key];
        $file_size = $photos['size'][$key];
        
        $new_file_name = md5(time() . $file_name) . '.' . pathinfo($file_name, PATHINFO_EXTENSION);
        $destination = 'uploads/' . $new_file_name;
        
        if(move_uploaded_file($file_tmp, $destination)) {
            $uploadedFiles[] = $destination;
        }
    }
    
    if(!empty($uploadedFiles)) {
        // Действия после успешной загрузки
        echo "Фотографии успешно загружены";
    } else {
        // Действия в случае ошибки
        echo "Ошибка загрузки фотографий";
    }
}
?>

В примере предполагается, что фотографии будут сохраняться в папку "uploads". Каждая фотография будет переименована в формате md5(время + имя файла).формат. Если загрузка прошла успешно, функция выведет "Фотографии успешно загружены", иначе "Ошибка загрузки фотографий".

Comments

[Альберт]

спасибо, а можете объяснить как совместить с другими данными из формы? текстовые поля, как их тоже передать?

[Paul14]

Добавляем данные в форму

var formData = new FormData();
    formData.append('photos[]', photos); 
    formData.append('text', text); // добавляем новую строку. Если нужно массив строк - то по аналогии с photos, переменная 'texts[]'
    ...

Принимаем в php

$photos = $_FILES['photos'];
$text = $_POST['text'];

[sharpsss]

Альберт, отметь его решение правильным челик заморочился расписал как никак

[Stalker_RED]

sharpsss, Альберт,

Зачем это все, если можно
const formData = new FormData(someFormElement);
И все данные из формы уже будут собраны?

[Альберт]

sharpsss, без проблем

Answer 2

[Stalker_RED]

На mdn есть пример отправки через FormData