Let's say you have such a code that with AJAX that is used for sending a contact form from your website. But what will happen if you'll have to send an attachment? It just will not work

$.ajax({
  url: " mail.php",
  type: "post",
  data: $('#join').serialize(),
  processData: false,
  contentType: false,
  success: function(data) {
    window.bPopup.close();
    setTimeout(function() {$('#thankyou').bPopup()},500);
  }
});

An HTML5 allows to send attachments with AJAX request. In order to attach a file, you need to create a FormData object like in a code snippet below:


$.ajax({
  url: "mail.php",
  type: "post",
  data: new FormData(this),
  processData: false,
  contentType: false,
  success: function(data) { 
    window.bPopup.close();
    setTimeout(function() {$('#thankyou').bPopup()},500);
  }
});