Cauta rapid aici ↑

Cum sa incarci continutul text dintr-un fisier de pe calculatorul utilizatorului intr-un element din formular

Incarcarea continutului unui fisier de tip text, fie el .txt, .html, /, .js, .json sau oricare alta extensie atata timp cat acesta contine text si nu are nevoie de o aplicatie soft pentru a putea fi citit (ex: .pdf) se poate realiza in cativa pasi foarte simpli. HTML 5 FILE API este ceea ce vom folosi si in prezent are sustinerea sau este suportat de catre toate browser-ele moderne, nu este de mirare ca doar a aparut de mai multi ani.

Pentru HTML vom avea nevoie de un formular ce va contine un input de tip file iar sub acesta vom avea un element textarea care va contine continutul respectivului fisier de tip text imediat selectat, ales de pe calculatorul urilizatorului.

In JavaScript vom avea trei variabile. O variabila va selecta formularul care va declansa evenimentul change in momentul cand ceva se schimba in starea formularului si pe care vom rula o functie, o alta variabila va selecta elementul textarea, cel care va contine continutul fisierului iar cea de-a treia variabila va contine obiectul FileReader, cel care face tot acest lucru posibil.

Obiectul FileReader contine mai multe metode (functii ale obiectului) si proprietati (variabile ale obiectului) cu care vom putea citi continutul fisierului, vom putea vedea cat de mare este acest fisier (size), vom putea vedea tipul fisierului (mime-type), vom putea vedea si citi numele fisierului si multe alte lucruri pe care inainte le puteam face doar cu ajutorul limbajului PHP (cel putin asa stiu eu). Practic cu ajutorul obiectului FileReader vom putea face validarea unui fisier pe partea de client si vom putea astfel impiedica un utilizator sa ne trimita un fisier pe care nu ni-l dorim... sau macar vom incerca. Obiectul FileReader este la fel de important pentru HTML 5 FILE API cum este obiectul XMLHttpRequest pentru AJAX.

Ordinea in care vom scrie scrip-ul nostru este foarte importanta si este bine sa o retinem pentru a nu avea probleme de logica.

Prima data vom selecta elementele noastre HTML si le vom pune in variabile. Elementele noastre vor fi formularul si campul textarea. Urmatorul pas este de a scrie functia care va fi executata in momentul cand este declansat evenimentul change pe formularul nostru. Aceasta functie va avea un singur parametru. Primul lucru pe care il vom face in interiorul functiei este sa declaram intr-o variabila obiectul FileReader cu ajutorul cuvantului new. Pe urmatoarea linie de cod din interiorul functiei parinte vom atasa evenimentul load, eveniment declansat (si suportat) in momentul cand fisierul este incarcat (sper ca nu gresesc), pe variabila ce va contine obiectul FileReader si care va declansa executarea unei functii anonime (fara nume) ce va avea si aceasta un singur parametru.

In interiorul acestei functii anonime vom declara o singura linie de cod. Aceasta linie de cod va contine variabila ce selecteaza campul textarea si cu ajutorul proprietatii innerHTML vom insera continutul fisierului in campul respectiv.

Pentru a putea realiza acest lucru ne vom folosi de parametru functiei copil si anonime. De acest parametru vom lega obiectul target si mai apoi de acesta proprietatea result, proprietate ce va contine continutul text al fisierului. Practic am selectat proprietatea result din obiectul taget.

Urmatoarea linie de cod va face referire la o alta metoda a obiectului FileReader. Aceasta linie de cod sau mai bine spus aceasta declaratie va fi in afara functiei copil si anonime dar in interiorul functiei parinte. Pe variabila ce contine obiectul FileReader vom executa metoda de citire a fisierului. Aceasta metoda este readAsText() si nu este singura, mai sunt inca trei metode, metode cu care vom putea citi in mai multe feluri un fisier.

Metoda readAsText() va avea ca argument calea catre fisierul respectiv din obiectul parametru al functiei. Ma refer aici la parametrul functiei urmat apoi de obiectul target si mai apoi de obiectul array files si din moment ce este un array vom folosi prima valoare, reprezentand cifra zero.

Si cu toatea acestea am incheiat functia noastra. Singurul lucru care ne-a ramas de facut este sa rulam aceasta functie parinte in momentul in care este declansat evenimentul change pe formularul nostru selectat intr-o variabila exact ca in exemplul de mai jos.