upload an image as attachment via ajax and php

Question

So i have a work HTML form that sends the entered content to email. This is use jquery to submit the form data via ajax to a php file to send email. This is working fine no problems. I now want to add max 4 document file uploads to the form and have these sent with the form data as attachments. So i believe that i understand the HTML Code form this, i also believe i understand how to the js checking bit and most of the php side. So whats the problem i here you ask, well i just cant get my head around the 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);
    }
  },
});

Every help or example i see sets data: as formData variable and i'm just unsure what i need to do with js var's to pass file data as this format from my form so a can then process it in php.

If some one could point me to an example of how to do this i would be much appreciative. I have spent all night doing this and i just cant seem to get my head around this

Thanks in advance for any help

Answer 1

In jquery ajax method the data property accept a object, string or array, you could collect all form entries as formData

const formData = new FormData(form);

And then tranform formData to an object

const data = Object.fromEntries(formData)

To use it in the ajax method

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);
    }
  },
});

Update 0

Because Object.fromEntries() has support since firefox 63, chrome 73 that is to say recent versions of browsers, you can use the following logic to get the object of an array without the need of 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);

See

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