À l'aide de jQuery ajax pour télécharger le fichier et les données de formulaire avec formData()

Je veux télécharger un fichier avec jquery ajax et php à l'aide de forData() avec ce 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;

Cette ligne contient toutes les données des champs dans mon formulaire:

data.append('data',$('#saveDocument').serializeArray());

Mais en PHP je ne peux pas accéder à ces données et je veux avoir accès à des données de formulaire à insérer sur une table, savez-vous quel est le problème?

Formulaire Html

<form id="saveDocument" enctype="multipart/form-data" method="post">
<p><i>Todos los campos son requeridos!</i></p>
<p> 
<input id="uName" class="uName span5" name="uName" type="text" placeholder="Nombre completo" required/>
</p>
<p> 
<input id="uEmail" class="uEmail span5" name="uEmail" type="email" placeholder="E-mail" required/>
</p>
<p> 
<select id="uDept" class="uDept span5" name="uDept" type="text" required>
<option value="0">Seleccione departamento</option>
<option value="1">Dirección</option>
<option value="2">Recursos Humanos</option>
<option value="3">Oficina</option>
</select>
</p>
<p> 
<input id="uIssue" class="uIssue span5" name="uIssue" type="text" placeholder="Asunto" required/>
</p>
<p>
<textarea id="uComment" class="uComment" name="uComment" placeholder="Comentario (Máximo 30 caracteres)" required></textarea>
</p>
<p>
<select id="uUrgency" class="uUrgency span5" name="uUrgency" type="text" required>
<option value="0">Seleccione urgencia</option>
<option value="1">Normal</option>
<option value="2">Alta</option>
<option value="3">Urgente</option>
</select>
</p>
<p>
<input id="uFile" class="uFile span5" name="uFile" type="file" required/>
<input id="nameFile" class="nameFile span5" name="nameFile" type="text" placeholder="Click para seleccionar el archivo" onClick="$('.uFile').click();"/>
</p>
<p>
<input class="btn btn-danger" type="reset" value="Limpiar"/>
<input id="sendFile" class="btn btn-primary" type="submit" value="Guardar"/>
</p>

L'image ci-dessous est tiré de développeurs de l'outil de google chrome:

À l'aide de jQuery ajax pour télécharger le fichier et les données de formulaire avec formData()

OriginalL'auteur SoldierCorp | 2013-05-24