title: wordpress ajax form submit with attachments
body: <p>Am trying to post data from a self made plugin wordpress form.I can successfully send form fields data by using <strong>form.serialize()</strong> but that leaves out file inputs ofcourse.So I tried the alternative of creating <strong>formdata</strong> by following this <a href="http://www.sanwebe.com/2014/04/ajax-contact-form-attachment-jquery-php" rel="nofollow noreferrer" title="tutorial">tutorial</a> however I get the 404 error when I use formdata instead of form.serialize.
  <a href="https://stackoverflow.com/a/31356150">This answer by Nithin on SO seemed to get the same problem as indicated by jon dhano</a></p>
  
  <p><strong>php</strong></p>
  
  <pre><code>&lt;form action="{get_permalink()}" id="app" method="post"&gt;
      &lt;p class="name"&gt;
          &lt;input name="name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Your Name" id="name"&gt;
      &lt;/p&gt;
      &lt;p class="email"&gt;
          &lt;input name="email" type="text" class="validate[required,custom[email]] feedback-input" id="email" placeholder="Your Email"&gt;
      &lt;/p&gt;
      &lt;p class="investment"&gt;
          &lt;input name="investment" type="text" class="validate[required,custom[integer]] feedback-input" id="investment" placeholder="Your Investment ID"&gt;
      &lt;/p&gt;
      &lt;h2 class="file-header"&gt;Files Upload&lt;/h2&gt;
      &lt;p class="files"&gt;
          &lt;span class="file-label"&gt;File [1]&lt;/span&gt;
          &lt;input name="file1" type="file" class="files-upload" id="file1"&gt;
      &lt;/p&gt;
      &lt;p class="files"&gt;
          &lt;span class="file-label"&gt;File [2]&lt;/span&gt;
          &lt;input name="file2" type="file" class="files-upload" id="file2"&gt;
      &lt;/p&gt;
      &lt;p class="files"&gt;
          &lt;span class="file-label"&gt;File [3]&lt;/span&gt;
          &lt;input name="file3" type="file" class="files-upload" id="file3"&gt;
      &lt;/p&gt;
      &lt;p class="files"&gt;
          &lt;span class="file-label"&gt;File [4]&lt;/span&gt;
          &lt;input name="file4" type="file" class="files-upload" id="file4"&gt;
      &lt;/p&gt;
      &lt;div class="submit"&gt;
          &lt;button type="submit" id="button-blue" name=""&gt;Submit&lt;/button&gt;
          &lt;div class="ease"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;input type="hidden" name="application_form_submitted" value="1"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>js</strong></p>
  
  <pre><code>(function($){
      $('#button-blue').click(function(e){
          e.preventDefault();
          var m_data = new FormData();
          m_data.append( 'name', $('input[name=name]').val());
          m_data.append( 'email', $('input[name=email]').val());
          m_data.append( 'investment', $('input[name=investment]').val());
          m_data.append( 'file1', $('input[name=file1]')[0].files[0]);
          m_data.append( 'file2', $('input[name=file2]')[0].files[0]);
          m_data.append( 'file3', $('input[name=file3]')[0].files[0]);
          m_data.append( 'file4', $('input[name=file4]')[0].files[0]);
  
          $.ajax({
              url: $('#app').attr('action'),
              data: m_data,
              processData: false,
              contentType: false,
              type: 'POST',
              dataType:'json',
              success: function (d) {
                  var d = JSON.parse(d);
                  alert(d.text);
              },
              error: function (xhr, textStatus, error) {
                  alert(error);
              }
          });
      });
  })( jQuery );
  </code></pre>