title: FormData() form Form Element always empty
body: <p>I've been trying to upload a File with Ajax but the FormData is always empty. </p>
  
  <p>This is the code i'm using to:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;link rel="stylesheet" href="../website/css/bootstrap.min.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form id="providerForm"&gt;
          &lt;input id="fileI" class="form-control" name="fileI" type="file" /&gt;
          &lt;button id="newProviderButton" type="submit" class="btn btn-success"
              value="Enviar"&gt;Enviar&lt;/button&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;script type="text/javascript"
      src="https://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt;
  &lt;script
      src="http://formvalidation.io/vendor/formvalidation/js/formValidation.min.js"&gt;&lt;/script&gt;
  &lt;script
      src="http://formvalidation.io/vendor/formvalidation/js/framework/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      var providerId = "";
      function newProvider() {
  
          var a = $("#providerForm")[0];
          var b = $("#providerForm");
          var c = new FormData($(b)[0]);
          var d = document.getElementById('providerForm');
          var dataT = new FormData(d);
          var params = $('#providerForm').serializeArray();
          c.append("file",$($(a).find("#fileI"))[0]); 
          $.each(params, function(i, val) {
              dataT.append(val.name, val.value);
              console.log(val.name + ": " + val.value);
          });
          $.ajax({
                      type : "POST",
                      beforeSend : function(request) {
                          request.setRequestHeader("Content-Type",
                                  "multipart/form-data");
                      },
                      url : "../services/user/profile/upload/image",
                      data : dataT,
                      cache : false,
                      contentType : false,
                      processData : false,
                      success : function(msg) {
                          if (msg.message == "OK") {
                              mAlert({
                                  container : $("#providerForm"),
                                  message : 'Usuario registrado correctamente',
                                  type : 'success',
                                  okButton : 'OK'
                              });
                          }
                      },
                      statusCode : {
                          401 : function() {
                              window.location.replace("../entrance.jsp");
                          }
                      }
                  });
  
      }
      $(document).ready(function() {
          $("#providerForm").on('reset',function(){
              $(this).data('formValidation').resetForm(true);
          });
           $('#providerForm').formValidation({
                  framework: 'bootstrap',
  
                  icon: {
                      valid: 'glyphicon glyphicon-ok',
                      invalid: 'glyphicon glyphicon-remove',
                      validating: 'glyphicon glyphicon-refresh'
                  },
                  fields: {}
              })
           .on('success.form.fv', function(e) {
                  // Prevent form submission
                  e.preventDefault();
  
                  var $form = $(e.target),
                      fv    = $(e.target).data('formValidation');
  
                  // Do whatever you want here ...
  
                  // Then submit the form as usual
                  newProvider();
                  //fv.defaultSubmit();
              });
      });
  &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>You can see the result here.</p>
  
  <p><a href="https://i.stack.imgur.com/bQM86.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bQM86.png" alt="enter image description here"></a></p>
  
  <p>As you can see I tried getting the HTMLElement througt different methods and even appending the element individually the result id FormData = {}</p>
  
  <p><strong>EDIT:</strong> </p>
  
  <p>I need the FormData encoding in <code>multipart/form-data</code> format</p>