загрузить изображение как вложение через ajax и php

Question

Итак, у меня есть рабочая HTML форма, которая отправляет введенный контент на электронную почту. Используется jquery для отправки данных формы через ajax в файл php для отправки электронной почты. Это работает нормально, никаких проблем. Теперь я хочу добавить в форму максимум 4 загрузки файлов документов и отправить их вместе с данными формы в виде вложений. Итак, я считаю, что понимаю код HTML из этого, я также считаю, что понимаю, как использовать бит проверки js и большую часть стороны php. Итак, в чем проблема, я здесь, вы спрашиваете, ну, я просто не могу понять ajax data: string.

$.ajax({
  type: "POST",
  url: "assets/php/quick_form.php",
  data:
    "name=" +
    name +
    "&reg=" +
    reg +
    "&phone=" +
    phone +
    "&vehicleType=" +
    vehicleType +
    "&postCode=" +
    postCode +
    "&message=" +
    message +
    "&phoneCon=" +
    phoneCon +
    "&textCon=" +
    textCon +
    "&whatsApp=" +
    whatsApp,
  success: function (text) {
    if (text == "success") {
      formSuccess();
    } else {
      formError();
      submitMSG(false, text);
    }
  },
});

Каждая помощь или пример, которые я вижу, устанавливает данные: как переменная formData, и я просто не уверен, что мне нужно делать с js var, чтобы передать данные файла в этом формате из моей формы, чтобы затем можно было обработать его в php.

Если бы кто-нибудь мог указать мне на пример того, как для этого я был бы очень признателен. Я потратил на это всю ночь, и я просто не могу понять это

Заранее спасибо за любую помощь

Answer 1

В методе jquery ajax свойство данных принимает объект, строку или массив, вы можете собрать все записи формы как formData

const formData = new FormData(form);

А затем преобразовать formData в объект

const data = Object.fromEntries(formData)

Для использования в методе ajax

const form = document.form.formID

// collect form data
const formData = new FormData(form);

// tranform formData to an object
const data = Object.fromEntries(formData);

$.ajax({
  type: "POST",
  url: "assets/php/quick_form.php",
  data: data,
  success: function (text) {
    if (text == "success") {
      formSuccess();
    } else {
      formError();
      submitMSG(false, text);
    }
  },
});

Обновление 0

Потому что Object.fromEntries() имеет поддержку с firefox 63, chrome 73 то есть скажем, последние версии браузеров, вы можете использовать следующий logi c, чтобы получить объект массива без необходимости Object.fromEntries

const formData = new FormData();

formData.append("name", "ada");
formData.append("email", "ada@example.com");

const data = Array.from(formData)
  .map(([name, value]) => ({
    name,
    value,
  }))
  .reduce((previousValue, currentValue) => {
    const [name, value] = Object.values(currentValue);

    previousValue[name] = value;

    return previousValue;
  }, {});

console.log(data);

См.

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries