title: Using jQuery ajax to upload file and form data with formData()
body: <p>I want upload a file with jquery ajax and php using forData() with this code:</p>
  
  <pre><code>var data = new FormData();
  
  data.append('image',document.getElementById('uFile').files[0]);
  data.append('tag','saveDocument');
  data.append('data',$('#saveDocument').serializeArray());
  
  $.ajax({
      url: url,
      type: 'post',
      data: data,
      cache: false,
      contentType:false,
      dataType: 'json',
      processData: false,
      success: function (data) {
          setAlert("Documento guardado correctamente!",success);
      }, error: function() {
          setAlert("Ha ocurrido un error al guardar!",error);
      }
  });
  return false;
  </code></pre>
  
  <p>This line contains all data of fields in my form:</p>
  
  <pre><code>data.append('data',$('#saveDocument').serializeArray());
  </code></pre>
  
  <p>But in PHP I can't access to that data and I want access to data of form to insert on a table, do you know what's the problem?</p>
  
  <p><strong>Html Form</strong></p>
  
  <pre><code>&lt;form id="saveDocument" enctype="multipart/form-data" method="post"&gt;
  &lt;p&gt;&lt;i&gt;Todos los campos son requeridos!&lt;/i&gt;&lt;/p&gt;
  &lt;p&gt; 
      &lt;input id="uName" class="uName span5" name="uName" type="text" placeholder="Nombre completo" required/&gt;
  &lt;/p&gt;
  &lt;p&gt; 
      &lt;input id="uEmail" class="uEmail span5" name="uEmail" type="email" placeholder="E-mail" required/&gt;
  &lt;/p&gt;
  &lt;p&gt; 
      &lt;select id="uDept" class="uDept span5" name="uDept" type="text" required&gt;
          &lt;option value="0"&gt;Seleccione departamento&lt;/option&gt;
          &lt;option value="1"&gt;Dirección&lt;/option&gt;
          &lt;option value="2"&gt;Recursos Humanos&lt;/option&gt;
          &lt;option value="3"&gt;Oficina&lt;/option&gt;
      &lt;/select&gt;
  &lt;/p&gt;
  &lt;p&gt; 
      &lt;input id="uIssue" class="uIssue span5" name="uIssue" type="text" placeholder="Asunto" required/&gt;
  &lt;/p&gt;
  &lt;p&gt;
      &lt;textarea id="uComment" class="uComment" name="uComment" placeholder="Comentario (Máximo 30 caracteres)" required&gt;&lt;/textarea&gt;
  &lt;/p&gt;
  &lt;p&gt;
      &lt;select id="uUrgency" class="uUrgency span5" name="uUrgency" type="text" required&gt;
          &lt;option value="0"&gt;Seleccione urgencia&lt;/option&gt;
          &lt;option value="1"&gt;Normal&lt;/option&gt;
          &lt;option value="2"&gt;Alta&lt;/option&gt;
          &lt;option value="3"&gt;Urgente&lt;/option&gt;
      &lt;/select&gt;
  &lt;/p&gt;
  &lt;p&gt;
      &lt;input id="uFile" class="uFile span5" name="uFile" type="file" required/&gt;
      &lt;input id="nameFile" class="nameFile span5" name="nameFile" type="text" placeholder="Click para seleccionar el archivo" onClick="$('.uFile').click();"/&gt;
  &lt;/p&gt;
  &lt;p&gt;
      &lt;input class="btn btn-danger" type="reset" value="Limpiar"/&gt;
      &lt;input id="sendFile" class="btn btn-primary" type="submit" value="Guardar"/&gt;
  &lt;/p&gt;
  </code></pre>
  
  <p>    </p>
  
  <p>The below image is taken from developers tool of chrome:</p>
  
  <p><img src="https://i.stack.imgur.com/alEs4.png" alt="enter image description here"></p>