Î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.

Cum Se Remediază Datele Mobile Car...
Cum Se Remediază Datele Mobile Care Nu Funcționează Pe Android

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:

  • 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: