FormData et upload de fichier en Ajax

FormData est un objet Javascript qui permet de créer un ensemble de clés et de valeurs pour l’envoi de données de formulaire en Ajax (XMLHttpRequest). Cela permet, entre autres, de gérer l’envoi de fichier grâce à l’encodage « multipart/form-data ». Encodage qui est automatiquement utilisé à partir du moment où l’on envoie un objet FormData, l’utilisation d’un header supplémentaire pour l’encodage n’est pas nécessaire.

var name = document.getElementsByName('tech-name')[0].value;
var img = document.getElementsByName('tech-img')[0].files[0];

var formData = new FormData();

formData.append('name', name);
formData.append('img-name', img.name);
formData.append('img', img, img.name);

Ici on stocke d’abord la valeur d’un champ de formulaire dans la variable name puis on stocke notre fichier dans la variable img. On crée ensuite un nouvel objet FormData dans lequel on vient stocker un ensemble de paires clé-valeur. D’abord name puis le nom du fichier dans img-name et enfin notre fichier dans img.

La méthode append() permet de stocker une chaîne de caractères, un fichier ou un blob. Si la valeur stockée n’est ni un fichier, ni un blob elle sera convertie en chaîne de caractères (13 deviendra ’13’).

Il ne reste plus qu’à envoyer notre fichier en Ajax :

var xhttp = new XMLHttpRequest();
...
xhttp.send(formData);

Les données envoyées sont dans le même format que celles envoyées avec la méthode submit() si elle utilise l’encodage « multipart/form-data ».

Si on reprend l’exemple précédent on pourra récupérer nos trois valeurs avec (en PHP) :

$name = $_POST['name'];
$img_name = $_POST['img-name];
$img = $_FILES['img'];

Récupérer le données d’un formulaire avec FormData

Plutôt que de stocker les paires clé-valeur une à une, il est possible de récupérer l’ensemble des données d’un formulaire en précisant l’élément du formulaire lors de la création de l’objet FormData.

var formData = new FormData(someFormElement);

Il est également possible de stocker d’autres données dans l’objet FormData pour compléter celui-ci (si nécessaire) avec la méthode append() vue précédemment.

Source

MDN Web Docs – Utilisation d’objets FormData

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *