Soit le formulaire suivant possédant un input de type « file », un autre de type « text » et enfin un « textarea ». Nous souhaitons envoyer, du côté serveur, l’ensemble des données de ce formulaire à l’aide d’Ajax :
<form id="listedit_form_attachment" action="/app.php/attachment/createTo/111" method="post" enctype="multipart/form-data" >
<input type="file" id="attachment_fileTempAttachment" name="attachment[fileTempAttachment]" value="" />
<input type="text" id="attachment_titleAttachment" name="attachment[titleAttachment]" value="" />
<textarea id="attachment_commentAttachment" name="attachment[commentAttachment]" class="no-horizontal"></textarea>
<input type="hidden" id="attachment__token" name="attachment[_token]" value="d2ccaa122678bb5d11955691c2293186ced68253" />
<input type="submit" value="Envoi de fichier" id="listedit_submit" />
</form>
Le code JQuery :
$("#listedit_form_attachment").submit(function()
{
var fileInput = document.getElementById('attachment_fileAttachment');
var file = fileInput.files[0];
var formData = new FormData();
formData.append('file', file);
formData.append('attachment[titleAttachment]',$('#attachment_titleAttachment').val());
formData.append('attachment[commentAttachment]', $('#attachment_commentAttachment').val());
formData.append('attachment[fileAttachment]', 'file');
formData.append('attachment[_token]', $('#attachment__token').val());
$.ajax({
type: "POST",
url: "{{ path('Upload_File', { 'toId' : fatherEntity.id }) }}",
data: formData,
cache: false,
contentType: false,
processData: false,
async: false,
beforeSend: function () { $("#divLoading").show(); },
complete: function () { $("#divLoading").fadeOut(); },
success: function(data){
$('#listedit_form_div_{{ divA }}').html(data);
}
});
return false;
});
Remarque :
Les données seront envoyées, du côté serveur, grâce à « FormData ». La méthode « append » va setter les valeurs dans le « formdata ». Dans l’Ajax les variables « cache », « contentType », « processData » et « async » doivent être mises à « false ».
Du côté serveur (Symfony2) :
1/ On utilise exactement les mêmes méthodes que pour un formulaire soumis plus classiquement :
$em = $this->getDoctrine()->getEntityManager();
$attachment = new Attachment();
$attachmentForm = $this->createForm(new AttachmentForm(), $attachment);
$request = $this->getRequest();
$attachmentForm->bindRequest($request);
2/ Pour récupérer les données relatives au fichier, on utilisera :
$file = $request->files->get('file');
// Récupérer les erreurs
$file->getError();
// Récupérer son nom original
$file->getClientOriginalName();
// L’enregistrer dans un dossier
$file->move("attachments/", $file->getClientOriginalName());