Pour traiter le contenu d’un formulaire de façon asynchrone, on utilise AJAX.
Exemple à l’aide de jQuery :
var form = $("#mon-formulaire"); $.ajax({ url: form.attr("action"), type: form.attr("method"), data: form.serialize() }); |
La question que je me suis posée est la suivante : comment ajouter des champs de type file et les traiter également en AJAX ? En effet, par défaut les fichiers ne sont pas traités.
FormData
Mes recherches se sont tournées vers l’objet FormData. Un objet FormData permet de créer un ensemble de paires clef-valeur pour un envoi via XMLHttpRequest. Les données transmises sont alors dans le même format qu’utiliserait la méthode submit() pour envoyer des données si le type d’encodage du formulaire correspondait à « multipart/form-data ». Cela permet donc d’uploader des fichiers.
Exemple :
var form = $("#mon-formulaire"); $.ajax({ url: form.attr("action"), type: form.attr("method"), contentType: false, processData: false, data: new FormData(form[0]) }); |
À noter que l’objet FormData est supporté par les navigateurs actuels (Firefox, Chrome, Safari, Edge, IE10+).
Sources :