Aujourd’hui il est possible d’uploader des fichiers en ajax grâce à XMLHttpRequest Niveau 2 et l’interface FormData de javascript. Pour l’utiliser avec la méthode ajax de jQuery il suffit de lui passer comme données l’objet FormData et de configurer les options correctement comme ci-dessous.
//au clic du bouton submit des formulaires ayant la classe "form-ajax"
$(document).on("submit", ".form-ajax", function (e) {
e.preventDefault();//on bloque l'envoie classique
var formData = new FormData($(this)[0]);//récupération des données du formulaire dans l'objet FormData
//appel ajax jQuery
$.ajax({
url: '/ma/route/ajax',
method: "POST",
data: formData,
processData: false,//ne pas oublier cette option
contentType: false,//ne pas oublier cette option
error: function (msg, string) {
//gestion des erreurs
},
success: function (response) {
//gestion de la réponse
}
});
});
$(document).on("submit", ".form-ajax", function (e) {
e.preventDefault();//on bloque l'envoie classique
var formData = new FormData($(this)[0]);//récupération des données du formulaire dans l'objet FormData
//appel ajax jQuery
$.ajax({
url: '/ma/route/ajax',
method: "POST",
data: formData,
processData: false,//ne pas oublier cette option
contentType: false,//ne pas oublier cette option
error: function (msg, string) {
//gestion des erreurs
},
success: function (response) {
//gestion de la réponse
}
});
});
De cette manière vous pouvez traiter coté serveur le formulaire de la même manière que si il n’était pas en ajax.
Pour un exemple de traitement d’upload d’image coté serveur en php vous pouvez vous référer a cet article