Traiter un formulaire avec fichiers en AJAX

Pour traiter le contenu d’un formulaire de façon asynchrone, on utilise AJAX.

Exemple à l’aide de jQuery :

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 :

À noter que l’objet FormData est supporté par les navigateurs actuels (Firefox, Chrome, Safari, Edge, IE10+).

Sources :

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.