Как отправить массив файлов на сервер в Jquery из input multiple?

Как отправить массив файлов на сервер в Jquery из input multiple?

19.04.2023
431
Иногда нужно загрузить несколько файлов одновременно. В этом случае мы можем использовать input с атрибутом multiple. Пример отправки массива файлов на сервер в Jquery из input multiple.

Использование input multiple

Сначала создайте форму для загрузки файлов на сервер. Для загрузки нескольких файлов одновременно нужно добавить атрибут multiple в тег input.

<form>
  <input type="file" name="files[]" multiple>
  <button type="button" id="uploadBtn">Загрузить</button>
</form>

Отправка файлов на сервер

Чтобы отправить файлы на сервер, мы будем использовать Jquery Ajax. Создайте обработчик события click на кнопке Загрузить. В обработчике мы получим файлы из input, создадим объект FormData и отправим его на сервер.

$(document).ready(function() {
  $('#uploadBtn').click(function() {
    // Получаем все выбранные файлы
    var files = $('input[name="files[]"]').get(0).files;

    if (files.length > 0) {
      // Создаем объект FormData
      var formData = new FormData();

      // Добавляем каждый файл в объект FormData
      for (var i = 0; i < files.length; i++) {
        var file = files[i];
        formData.append('files[]', file, file.name); // Добавляем каждый файл в объект FormData с его именем
      }

      // Отправляем данные на сервер с помощью Jquery Ajax
      $.ajax({
        url: 'upload.php', // URL, куда отправляем данные
        type: 'POST', // Тип запроса - POST
        data: formData, // Данные, которые мы отправляем на сервер
        processData: false, // Запрещаем обработку данных в jQuery
        contentType: false, // Запрещаем установку заголовка типа контента в jQuery
        success: function(response) { // Функция, которая будет выполнена после успешной отправки данных на сервер
          console.log(response); // Выводим ответ сервера в консоль
        }
      });
    }
  });
});

Обработка файлов на сервере

На сервере мы можем обработать файлы так же, как и одиночные файлы. Используйте цикл для обработки всех файлов.

$files = $_FILES['files'];

// Цикл для обработки каждого файла
for ($i = 0; $i < count($files['name']); $i++) {
  $file_name = $files['name'][$i]; // Получаем имя файла
  $file_tmp = $files['tmp_name'][$i]; // Получаем временное имя файла

  // Перемещаем файл из временной папки в папку uploads с именем, указанным в $_FILES['name']
  move_uploaded_file($file_tmp, 'uploads/' . $file_name);
}

В этом примере мы используем цикл for для обработки каждого файла, загруженного на сервер. Внутри цикла мы получаем имя файла и временное имя файла, а затем перемещаем файл из временной папки в папку uploads с именем, указанным в $_FILES['name']. Это позволяет сохранить файл на сервере и обработать его в дальнейшем.

Заключение

Мы использовали Jquery Ajax для отправки файлов на сервер и создали объект FormData, чтобы отправить несколько файлов одновременно. На сервере мы обработали файлы так же, как и одиночные файлы.