File API

Încărcarea fișierelor

File API permite utilizarea JavaScript pentru citirea fișierelor locale, în special, pentru aceasta se aplică următoarele interfețe:

File: reprezintă un singur fișier și conține informații despre fișier, cum ar fi numele fișierului sau data ultimei modificări
FileList: reprezintă o listă de obiecte File
Blob: reprezintă date binare
FileReader: oferă metode pentru citirea obiectelor de tip File și Blob

Pentru a accesa conținutul unui fișier, trebuie să-l selectăm. Există două opțiuni de selectare a fișierelor: prin dialogul de selectare a fișierelor și prin drag-and-drop într-o zonă specifică a paginii web. Să examinăm ambele opțiuni.

Selectarea fișierului prin dialogul de selectare

Pentru a accesa fișierele locale prin File API, utilizatorul trebuie mai întâi să selecteze fișierele corespunzătoare. Acest lucru garantează că fișierele arbitrare nu pot fi citite în mod neobservat prin JavaScript. Una dintre opțiunile de a oferi utilizatorilor posibilitatea de a selecta un fișier este prin elementul input type="file". De exemplu:

<input type="file" id="files" name="files[]" multiple />

Dacă utilizatorul a selectat unul sau mai multe fișiere, atunci elementul input generează un eveniment change. Utilizând un handler pentru acest eveniment, putem obține fișierele selectate:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>FDC.COM</title>
</head>
<body>
<input type="file" id="files" name="files[]" multiple />
<div id="list"></div>
<script>
function printFiles(e) {  
   const files = e.target.files;   // obținem toate fișierele selectate  
   let output = "";
   for (let i = 0; i < files.length; i++) {        // Parcurgem toate fișierele selectate  
       const file = files[i];      // Obținem fișierul
       console.log(file);
       output += "<li><p><strong>" + file.name + "</strong></p>";
       output += "<p>Type: " + file.type || "n/a</p>";
       output += "<p>Size: " + file.size + " bytes</p>";  
       output += "<p>Changed on: " +  file.lastModifiedDate.toLocaleDateString() + "</p></li>";  
   }
   document.getElementById("list").innerHTML = "<ul>" + output + "</ul>";
}
document.getElementById("files").addEventListener("change", printFiles);
</script>
</body>
</html>

Aici, pe pagină este situat un element pentru selectarea fișierelor, precum și un element div pentru afișarea informațiilor despre fișierele selectate.

În codul JavaScript, atașăm la evenimentul "change" al elementului de selectare a fișierelor funcția-handler printFiles. În această funcție, prin parametru obținem fișierele selectate:

const files = e.target.files;

Valoarea e.target.files reprezintă un obiect FileList - o specie de masiv de fișiere, unde fiecare fișier este reprezentat de un obiect File. Tipul File stochează informații despre fișier în propriile sale proprietăți:

name: numele fișierului
type: tipul fișierului
size: dimensiunea fișierului în bytes
lastModifiedDate: data și ora ultimei modificări

Și în continuare, într-un ciclu, parcurgem toate fișierele și valorile tuturor proprietăților fișierului le adăugăm în variabila output, care apoi este afișată pe pagina web.

for (let i = 0; i < files.length; i++) {        // Parcurgem toate fișierele selectate  
   const file = files[i];      // Obținem fișierul
   console.log(file);
   output += "<li><p><strong>" + file.name + "</strong></p>";
   output += "<p>Type: " + file.type || "n/a</p>";
   output += "<p>Size: " + file.size + " bytes</p>";  
   output += "<p>Changed on: " +  file.lastModifiedDate.toLocaleDateString() + "</p></li>";  
}

De exemplu, folosind elementul <input type="file" />, selectez din sistemul de fișiere, 2 fișiere:

Și după selecție, codul JavaScript va obține fișierele selectate și va afișa informațiile obținute pe pagina web:

Obținerea fișierelor prin intermediul Drag and Drop API

Utilizarea Drag and Drop API reprezintă a doua metodă de obținere a fișierelor. Pentru utilizarea acestui API, este necesar mai întâi să se definească un element pe pagina web, pe care utilizatorul va trage fișierul(e). Ca un astfel de element poate servi elementul <div>. Apoi, pentru acest element sunt înregistrate handlere pentru două evenimente: pentru evenimentul de tragere dragover și pentru evenimentul de finalizare a tragerii drop.

Evenimentul de tragere dragover este executat când un fișier este tras pe element (dar încă nu este eliberat). Evenimentul de finalizare a tragerii drop este executat când utilizatorul eliberează fișierul pe element, și tragerea este completată.

Definim următoarea pagină web:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>FDC.COM</title>
</head>
<body>
<div id="target" style="width:300px; padding: 15px; background-color: gray;">Trageți fișierele aici</div>
<div id="fileList"></div>
<script>
function printFiles(e) {  
   e.preventDefault();
   const files = e.dataTransfer.files;   // obținem toate fișierele selectate  
   let output = "";
   for (let i = 0; i < files.length; i++) {        // Parcurgem toate fișierele selectate  
       const file = files[i];      // Obținem fișierul
       console.log(file);
       output += "<li><p><strong>" + file.name + "</strong></p>";
       output += "<p>Type: " +  file.type || "n/a</p>";
       output += "<p>Size: " + file.size + " bytes</p>";  
       output += "<p>Changed on: " +  file.lastModifiedDate.toLocaleDateString() + "</p></li>";  
   }
   document.getElementById("fileList").innerHTML = "<ul>" + output + "</ul>";
}
function handleDragOver(e) {  
   e.preventDefault();    
   e.dataTransfer.dropEffect = "copy";
}
const target = document.getElementById("target");
target.addEventListener("dragover", handleDragOver);
target.addEventListener("drop", printFiles);
</script>
</body>
</html>

Aici, pe pagină avem de asemenea un element <div> pentru afișarea informațiilor despre fișierele selectate. Și de asemenea este definit un element <div> separat, pe care utilizatorul va trage fișierele. Pentru ca zona de tragere să fie vizibilă, aceasta este colorată în gri.

Pentru zona de tragere (<div id="target">) sunt stabilite două handlere. Handlerul evenimentului dragover stabilește valoarea "copy" ca efect al tragerii:

function handleDragOver(e) {  
   e.preventDefault();    
   e.dataTransfer.dropEffect = "copy";
}

Handlerul evenimentului drop - funcția printFiles afișează datele fișierelor pe pagina web. Pentru obținerea fișierelor selectate se utilizează proprietatea e.dataTransfer.files:

const files = e.dataTransfer.files

Această proprietate reprezintă de asemenea un obiect-listă FileList, unde fiecare element reprezintă un obiect File.

Astfel, putem trage pe zona gri fișierele dorite, și mai jos va fi afișată informația despre aceste fișiere.