Tout ce que vous devez savoir sur l'objet `FormData` en JavaScript

Lorsque vous travaillez avec des données de formulaires HTML en JavaScript, vous rencontrez souvent le besoin de collecter, manipuler et envoyer ces données au serveur. C'est là qu'intervient FormData : une API de gestion de formulaires puissante et flexible. Dans cet article, nous expliquerons en détail le fonctionnement de FormData, ses avantages et comment vous pouvez l'utiliser dans des scénarios réels.

---

Qu’est-ce que FormData ?

FormData est un objet JavaScript intégré qui permet :

• Collecte simple de données à partir de formulaires HTML.

• Envoi de ces données au serveur à l'aide de l'API fetch ou XMLHttpRequest.

• Travailler avec des données binaires, comme des fichiers.

Cet objet formate automatiquement les données selon le type MIME multipart/form-data, ce qui le rend idéal pour envoyer des données complexes, y compris des fichiers.

---

Comment créer un objet FormData ?

Création d'un objet FormData vide

Si vous souhaitez ajouter des données manuellement, utilisez le constructeur FormData vide :

const formData = new FormData();
formData.append('username', 'Jelena');
formData.append('email', 'jelena@example.com');

Création d'un objet FormData à partir d'un formulaire

Si vous disposez d'un formulaire HTML, vous pouvez transmettre directement la référence du formulaire au constructeur FormData, qui en collectera automatiquement toutes les données.

const form = document.getElementById('registrationForm');
const formData = new FormData(form);

---

Ajout de données

Les données sont ajoutées à l'aide de la méthode .append(key, value) :

formData.append('firstName', 'Jelena');
formData.append('lastName', 'Petković');

Si vous ajoutez un fichier depuis , utilisez simplement .files[0] :

const fileInput = document.getElementById('profilePicture');
formData.append('profilePicture', fileInput.files[0]);

---

Lecture de données

Pour parcourir les données de l'objet FormData, utilisez une boucle for...of avec la méthode .entries() :

for (let [key, value] of formData.entries()) {
  console.log(`${key}: ${value}`);
}

---

Envoi des données FormData au serveur

FormData est idéal pour envoyer des données au serveur à l'aide de l'API fetch. Voici un exemple simple :

fetch('https://example.com/api/register', {
  method: 'POST',
  body: formData, // Automatski formatiran kao multipart/form-data
})
  .then(response => response.json())
  .then(data => console.log('Uspešno registrovano:', data))
  .catch(error => console.error('Greška:', error));

Pas besoin de définir manuellement l'en-tête Content-Type ; FormData le fait automatiquement.

---

Avantages de FormData

1. Travailler avec des fichiers
   
   FormData vous permet d'ajouter et d'envoyer facilement des fichiers directement depuis champs.

2. Sérialisation automatique
   
   Au lieu de formater manuellement les données, FormData les formate automatiquement en multipart/form-data.

3. Flexibilité
   
   Gestion facile des paires clé-valeur, y compris la possibilité d'itérer et de mettre à jour les données.

4. Prise en charge des données binaires
   
   Il est idéal pour envoyer des données binaires telles que des images, des PDF ou d'autres fichiers.

---

Exemple tiré de la pratique : formulaire d'inscription

Voici un exemple complet où nous collectons les données du formulaire et les envoyons au serveur :

Formulaire HTML

const formData = new FormData();
formData.append('username', 'Jelena');
formData.append('email', 'jelena@example.com');

---

Conseils utiles

• Si vous souhaitez modifier manuellement les données, utilisez .set(key, value) au lieu de .append().

• Vous pouvez vérifier si une clé particulière existe en utilisant la méthode .has(key).

• Pour supprimer des données, utilisez .delete(key).

---

Conclusion

FormData est un outil puissant pour travailler avec les données de formulaire. Il permet une collecte, une manipulation et un envoi faciles des données, même lorsque vous travaillez avec des fichiers. Sa flexibilité et sa facilité d'intégration avec les API JavaScript modernes le rendent indispensable pour de nombreuses applications Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!