DEV Community

Cover image for Sve što treba da znate o `FormData` objektu u JavaScript-u
Jelena Petkovic
Jelena Petkovic

Posted on

Sve što treba da znate o `FormData` objektu u JavaScript-u

#javascript #html #formdata

Kada radite sa podacima iz HTML formi u JavaScript-u, često se susrećete sa potrebom za prikupljanjem, manipulisanjem i slanjem tih podataka na server. Ovde na scenu stupa FormData — moćan i fleksibilan API za upravljanje formama. U ovom postu ćemo detaljno objasniti kako FormData funkcioniše, njegove prednosti i kako ga možete koristiti u stvarnim scenarijima.

Šta je FormData?

FormData je ugrađeni JavaScript objekat koji omogućava:

  • Jednostavno prikupljanje podataka iz HTML formi.

  • Slanje tih podataka serveru koristeći fetch API ili XMLHttpRequest.

  • Rad sa binarnim podacima, poput fajlova.

Ovaj objekat automatski formatira podatke u skladu sa MIME tipom multipart/form-data, što ga čini idealnim za slanje složenih podataka, uključujući fajlove.

Kako kreirati FormData objekat?

Kreiranje praznog FormData objekta

Ako želite ručno da dodate podatke, koristite prazan FormData konstruktor:

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

Kreiranje FormData objekta iz forme

Ako imate HTML formu, možete direktno proslediti referencu forme FormData konstruktoru, što će automatski prikupiti sve podatke iz nje.

const form = document.getElementById('registrationForm');
const formData = new FormData(form);
Enter fullscreen mode Exit fullscreen mode

Dodavanje podataka

Podaci se dodaju pomoću metode .append(key, value):

formData.append('firstName', 'Jelena');
formData.append('lastName', 'Petković');
Enter fullscreen mode Exit fullscreen mode

Ako dodajete fajl iz <input type="file">, prosto koristite .files[0]:

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

Čitanje podataka

Da biste iterirali kroz podatke u FormData objektu, koristite for...of petlju zajedno sa .entries() metodom:

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

Slanje FormData podataka na server

FormData je idealan za slanje podataka serveru pomoću fetch API-ja. Evo jednostavnog primera:

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));
Enter fullscreen mode Exit fullscreen mode

Nema potrebe za ručnim postavljanjem Content-Type zaglavlja; FormData to automatski radi.

Prednosti FormData

  1. Rad sa fajlovima

    FormData omogućava lako dodavanje i slanje fajlova direktno iz <input type="file"> polja.

  2. Automatska serializacija

    Umesto da ručno formatirate podatke, FormData ih automatski formatira u multipart/form-data.

  3. Fleksibilnost

    Lako upravljanje parovima ključeva i vrednosti, uključujući mogućnost iteracije i ažuriranja podataka.

  4. Podrška za binarne podatke

    Idealan je za slanje binarnih podataka poput slika, PDF-ova ili drugih fajlova.

Primer iz prakse: Registraciona forma

Evo jednog kompletnog primera gde prikupljamo podatke iz forme i šaljemo ih serveru:

HTML Forma 

<form id="registrationForm">
  <label for="username">Korisničko ime:</label>
  <input type="text" id="username" name="username" required>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>

  <label for="profilePicture">Profilna slika:</label>
  <input type="file" id="profilePicture" name="profilePicture">

  <button type="submit">Registruj se</button>
</form>
Enter fullscreen mode Exit fullscreen mode

JavaScript Kod 

document.getElementById('registrationForm').addEventListener('submit', function(event) {
  event.preventDefault(); // Sprečava reload stranice

  const form = event.target;
  const formData = new FormData(form);

  fetch('https://example.com/api/register', {
    method: 'POST',
    body: formData,
  })
    .then(response => response.json())
    .then(data => console.log('Uspešno registrovano:', data))
    .catch(error => console.error('Greška:', error));
});
Enter fullscreen mode Exit fullscreen mode

Korisni saveti

  • Ako želite da ručno modifikujete podatke, koristite .set(key, value) umesto .append().

  • Možete proveriti da li određeni ključ postoji pomoću .has(key) metode.

  • Za uklanjanje podataka koristite .delete(key).

Zaključak

FormData je moćan alat za rad sa podacima iz formi. Omogućava lako prikupljanje, manipulaciju i slanje podataka, čak i kada radite sa fajlovima. Njegova fleksibilnost i jednostavna integracija sa modernim JavaScript API-jima čine ga nezamenjivim za mnoge web aplikacije.

Top comments (0)