În această postare, vom afla despre interfața FormData disponibilă în browsere web moderne ca parte a specificațiilor HTML5.

Vom vedea exemple de utilizare a FormData cu Ajax, Angular 7, Ionic și React.

Ce este FormData

FormData este pur și simplu o structură de date care poate fi utilizată pentru a stoca perechi cheie-valoare. Așa cum sugerează și numele său, este conceput pentru a deține date de formulare, adică îl puteți folosi cu JavaScript pentru a construi un obiect care corespunde unui formular HTML. Este util mai ales atunci când trebuie să trimiteți date de formular către punctele finale RESTful API, de exemplu pentru a încărca fișiere simple sau multiple folosind XMLHttpRequest interfață, fetch() API sau Axios.

Puteți crea un obiect FormData instanțând interfața FormData folosind new operator după cum urmează:

const formData = new FormData()

formData referință se referă la o instanță a FormData. Puteți apela multe metode pe obiect pentru a adăuga și a lucra cu perechi de date. Fiecare pereche are o cheie și o valoare.

Acestea sunt metodele disponibile pentru obiectele FormData:

ad-banner
  • append() : folosit pentru a adăuga o pereche cheie-valoare obiectului. Dacă cheia există deja, valoarea este adăugată la valoarea inițială pentru acea cheie,
  • delete(): folosit pentru a șterge o pereche cheie-valoare,
  • entries(): returnează un obiect Iterator pe care îl puteți utiliza pentru a parcurge lista perechilor de valori cheie din obiect,
  • get(): folosit pentru a returna valoarea unei chei. Dacă sunt adăugate mai multe valori, acesta returnează prima valoare,
  • getAll(): folosit pentru a returna toate valorile pentru o cheie specificată,
  • has(): folosit pentru a verifica dacă există o cheie,
  • keys(): returnează un obiect Iterator pe care îl puteți utiliza pentru a lista tastele disponibile în obiect,
  • set(): folosit pentru a adăuga o valoare obiectului, cu cheia specificată. Aceasta va relata valoarea dacă există deja o cheie,
  • values(): returnează un obiect Iterator pentru valorile obiectului FormData.

Exemplu de încărcare a fișierelor cu Vanilla JavaScript

Să vedem acum un exemplu simplu de încărcare a fișierelor folosind JavaScript vanilat, XMLHttpRequest și FormData.

Navigați la folderul de lucru și creați și index.html fișier cu următorul conținut:

<!DOCTYPE html>
<html>

<head>
	<title>Parcel Sandbox</title>
	<meta charset="UTF-8" />
</head>

<body>
	<div id="app"></div>

	<script src="https://www.freecodecamp.org/news/formdata-explained/index.js">
	</script>
</body>

</html>

Pur și simplu creăm un document HTML cu un <div> identificate de app ID. Apoi, includem index.js fișier folosind un <script> etichetă.

Apoi, creați fișierul index.js fișier și adăugați următorul cod:

document.getElementById("app").innerHTML = `
<h1>File Upload & FormData Example</h1>
<div>
<input type="file" id="fileInput" />
</div>
`;

const fileInput = document.querySelector("#fileInput");

const uploadFile = file => {
  console.log("Uploading file...");
  const API_ENDPOINT = "https://file.io";
  const request = new XMLHttpRequest();
  const formData = new FormData();

  request.open("POST", API_ENDPOINT, true);
  request.onreadystatechange = () => {
    if (request.readyState === 4 && request.status === 200) {
      console.log(request.responseText);
    }
  };
  formData.append("file", file);
  request.send(formData);
};

fileInput.addEventListener("change", event => {
  const files = event.target.files;
  uploadFile(files[0]);
});

Mai întâi introducem un <input type="file" id="fileInput" /> element din pagina noastră HTML. Acesta va fi folosit pentru a selecta fișierul pe care îl vom încărca.

Apoi, căutăm elementul de introducere a fișierului folosind querySelector() metodă.

Apoi, definim uploadFile() metoda prin care declarăm mai întâi un API_ENDPOINT variabilă care deține adresa punctului nostru final de încărcare a fișierului. Apoi, creăm un XMLHttpRequest cerere și un gol FormData obiect.

Folosim metoda append din FormData pentru a adăuga fișierul, transmis ca parametru la uploadFile() metoda, la file cheie. Aceasta va crea o pereche cheie-valoare cu file ca cheie și conținutul fișierului trecut ca valoare.

Apoi, trimitem solicitarea folosind send() Metodă de XMLHttpRequest și trecem în FormData obiect ca argument.

După definirea uploadFile() , ascultăm evenimentul de schimbare de pe <input> element și îl numim uploadFile() metoda cu fișierul selectat ca argument. Fișierul este accesat de la event.target.files matrice.

Puteți experimenta acest exemplu din acest sandbox de cod:

Încărcarea mai multor fișiere

Puteți modifica cu ușurință codul de mai sus pentru a accepta încărcarea mai multor fișiere.

Mai întâi, trebuie să adăugați fișierul multiple proprietate la <input> element:

<input type="file" id="fileInput" multiple />

Acum, veți putea selecta mai multe fișiere din unitatea dvs.

Apoi, schimbați fișierul uploadFile() metoda de a accepta o matrice de fișiere ca argument și pur și simplu bucla prin matrice și a atașa fișierele la FormData obiect:

const uploadFile = (files) => {
  console.log("Uploading file...");
  const API_ENDPOINT = "https://file.io";
  const request = new XMLHttpRequest();
  const formData = new FormData();

  request.open("POST", API_ENDPOINT, true);
  request.onreadystatechange = () => {
    if (request.readyState === 4 && request.status === 200) {
      console.log(request.responseText);
    }
  };
  
  for (let i = 0; i < files.length; i++) {
    formData.append(files[i].name, files[i])
  }
  request.send(formData);
};

În cele din urmă, apelați metoda cu o serie de fișiere ca argument:

fileInput.addEventListener("change", event => {
  const files = event.target.files;
  uploadFile(files);
});

Apoi, puteți consulta aceste tutoriale avansate pentru modul de utilizare FormData cu Angular, Ionic și React: