title: JQuery AJAX - Sending a JSONP form with attached files
body: <p>I'm working in a contact form for our clients that creates webpages with us with their own domain. We offer them a hosting and a web editor to create their websites. When they create a contact form in their websites, whoever that visit their websites and fills a form to contact them, it is sent to our platform and it sends a email to our client notifying him/her that someone filled his/her contact form.</p>
  
  <p>To make it work, we are using a <code>jsonp</code> ajax call in our clients webpage to send the form to our platform, which performs the email template and sends the email.</p>
  
  <p>The problem now is that our clients asked to add a <code>input</code> field type to allow whoever that visits their page to attach a file to the form, so they can see an attached file in the contact notification email, but I can't find a way to do it using <code>jsonp</code> because it uses <code>GET</code> method to create a crossdomain request and everthing I've serarched in Stackoverflow, talks about using a <code>POST</code> method to send files with a form and get form data as <code>new FormData()</code>.</p>
  
  <p>Here is the code I had before trying the implementation:</p>
  
  <pre><code>var $form = $('form');
  $form.submit(function(e){
      e.preventDefault();
      $.ajax({
          url: url,
          dataType: "jsonp",
          data: $form.serialize(),
          beforeSend: function () {
              $form.data('allowSending', false); // To prevent multiple sendings while processing
          },
          success: function(data) {
              alert(data.message);
              $form.data('allowSending', true);
          }
      });
  });
  </code></pre>
  
  <p>This is the code that I've tried, but it's not handled as expected:</p>
  
  <pre><code>var $form = $('form');
  $form.submit(function(e){
      e.preventDefault();
      $.ajax({
          url: url,
          processData: false,
          contentType: false,
          dataType: "jsonp",
          data: new FormData(this),
          beforeSend: function () {
              $form.data('allowSending', false); // To prevent multiple sendings while processing
          },
          success: function(data) {
              alert(data.message);
              $form.data('allowSending', true);
          }
      });
  });
  </code></pre>
  
  <p>When it sends the filled form with the code that I've tried (the second one), tries to send the data as an object through the URL, like: <code>?callback=jQuery111107622947758095266_1459251318335&amp;[object%20FormData]&amp;_=1459251318336</code></p>
  
  <p>How can I solve this?</p>
  
  <p>Thanks in advance.</p>
  
  <p>Regards.</p>
  
  <p>PS: To make things harder, forms are completely dynamic, so if a solution is passing parameters manually, etc. it must be in a dynamic way with a <code>for</code> loop.</p>