title: JQuery sending Post Request with attached file
body: <p>I got form file input (only 1 file) so to submit it I've tried this : </p>
  
  <pre><code>$("#addBrand").validate({
          rules: {
              brandName: "required",
              brandLogo: "required"
  
          },
          messages: {
              brandName: "Please enter the brand name",
              brandLogo: "Please add brand Logo"
  
          },
          errorElement: 'p',
          errorClass: 'help-block',
          errorPlacement: function(error, element) {
              if(element.parent('.form-group').length) {
                  error.insertAfter(element.parent());
              } else {
                  error.insertAfter(element);
              }
          },
          highlight: function(element) {
              $(element).closest('.form-group').addClass('has-error');
          },
          unhighlight: function(element) {
              $(element).closest('.form-group').removeClass('has-error');
          },
  
          submitHandler: function(form, event) {
                  run_waitMe();
                  var $form = $(form);
                  event.preventDefault(); //keeps the form from behaving like a normal (non-ajax) html form
                  var url = $form.attr('action');
                  var data = new formData();
                  data.append ('brandName', $('#brandName').val());
                  data.append('brandLogo', $('#brandLogo')[0].files[0] );
                  $.post(url, data, function(response) {
                      //handle successful validation
                      $('.wrapper').waitMe('hide');
                      if (response["fail"] == true) {
                          var errors = response['errors'];
                          for (var key in errors) {
                              if (errors.hasOwnProperty(key)) {
                                  var field = errors[key];
                                  for ( var i = 0; i &lt; field.length; i++) {
                                      var $input = $form.find('#' + key );
                                      ($input.parent().find("p")).remove();
                                      $input.parent().parent().removeClass( "has-error" );
                                      $input.parent().parent().addClass( "has-error" );
                                      $input.after('&lt;p id="'+ key + '-error" class="help-block"&gt;'+ field[i]+'&lt;/p&gt;');
  
                                  }
                              }
                          }
  
                      } else {
                          $('.wrapper').waitMe('hide');
                          $('#addBrand').modal('hide');
                          $(".combobox").prepend("&lt;option value='"+response['objectId']+"' selected='selected'&gt;"+ response['objectName']+"&lt;/option&gt;");
                          console.log("&lt;option value='"+response['objectId']+"' selected='selected'&gt;"+ response['objectName']+"&lt;/option&gt;");
                      }
                  }).fail(function(response) {
                      //handle failed validation
                      $('.wrapper').waitMe('hide');
                      console.log("Failed");
  
                  });
          }
      });
  </code></pre>
  
  <p>With this code I get this error : </p>
  
  <blockquote>
    <p>formData is not defined : var data = new formData();</p>
  </blockquote>
  
  <p>Also I tried something like this : </p>
  
  <pre><code>submitHandler: function(form) {
              $('#addBrand').unbind('submit').bind('submit', function(e){
                  run_waitMe();
                  var $form = $(this);
                  e.preventDefault(); //keeps the form from behaving like a normal (non-ajax) html form
                  var url = $form.attr('action');
                  var data = new FormData();
                  data.append ('brandName', $('#brandName').val());
                  data.append('brandLogo', $('#brandLogo')[0].files[0] );
  
                  $.post(url, data, function(response) {
                      //handle successful validation
                      $('.wrapper').waitMe('hide');
                      if (response["fail"] == true) {
                          var errors = response['errors'];
                          for (var key in errors) {
                              if (errors.hasOwnProperty(key)) {
                                  var field = errors[key];
                                  for ( var i = 0; i &lt; field.length; i++) {
                                      var $input = $form.find('#' + key );
                                      ($input.parent().find("p")).remove();
                                      $input.parent().parent().removeClass( "has-error" );
                                      $input.parent().parent().addClass( "has-error" );
                                      $input.after('&lt;p id="'+ key + '-error" class="help-block"&gt;'+ field[i]+'&lt;/p&gt;');
  
                                  }
                              }
                          }
  
                      } else {
                          $('.wrapper').waitMe('hide');
                          $('#addBrand').modal('hide');
                          $(".combobox").prepend("&lt;option value='"+response['objectId']+"' selected='selected'&gt;"+ response['objectName']+"&lt;/option&gt;");
                          console.log("&lt;option value='"+response['objectId']+"' selected='selected'&gt;"+ response['objectName']+"&lt;/option&gt;");
                      }
                  }).fail(function(response) {
                      //handle failed validation
                      $('.wrapper').waitMe('hide');
                      console.log("Failed");
  
                  });
              });
          }
  </code></pre>
  
  <p>but I get this error : </p>
  
  <blockquote>
    <p>TypeError: 'append' called on an object that does not implement
    interface FormData.</p>
  </blockquote>