Cauta rapid aici ↑

Cum sa incarci o poza de pe calculatorul utilizatorului intr-o pagina web

Incarcarea unei poze de pe calculatorul utilizatorului se poate realiza la fel de simplu precum in tutorialul anterior, cel in care v-am prezentat cum se poate realiza incarcarea continutului text dintr-un fisier de pe calculatorul utilizatorului.

In acel tutorial v-am prezentat obiectul FileReader si metoda readAsText(). In acest tutorial vom face cunostinta cu metoda readAsDataURL(). Spre deosebire de metoda readAsText(), metoda care ne citea continutul fisierului sub forma unui string si apoi il plasa in proprietatea result, metoda readAsDataURL() va face acelasi lucru cu mica diferenta ca respectivul continut va fi codat in baza 64, dupa cum se va putea vedea in momentul in care veti inspecta elementul in browser.

Pentru HTML vom avea nevoie doar de doua elemente. Primul va fi un input de tip file (il puteti pune si intr-un formular, dar asa veti scrie mai mult cod) iar al doilea va fi un div ce va contine imaginea de pe calculatorul utilizatorului.

In JavaScript ne vom folosi de un mic siretlic cu care vom evita sa scriem de mai multe ori document.getElementById() iar asta o vom face cu ajutorul unei functii pe care o vom apela ori de cate ori avem de selectat un element dupa un ID. Sub aceasta functie vom selecta elementele noastre HTML, respectiv input-ul de tip file si div-ul care va contine imaginea plus ca va trebui sa creeam elementul imagine si binenteles ca il vom declara intr-o variabila.

Urmatorul pas este sa creeam functia ce va fi executata in momentul cand este declansat evenimentul change pe input-ul de tip file.

Aceasta functie va avea un nume si un parametru si va fi functia parinte pentru o alta functie din interiorul ei. Primul lucru pe care il vom face in interiorul functiei parinte va fi sa declaram intr-o variabila obiect, obiectul FileReader cu ajutorul cuvantului new. Odata declarata aceasta variabila obiect, va trebui sa ii atasam o functie ce va rula in momentul cand este declansat evenimentul loadend sau load, aceasta este functia anonima copil cu un singur parametru.

In interiorul functiei copil vom avea doua linii de cod. Prima linie va avea ca scop atasarea pe elementul imagine creat mai sus a sursei fisierului, in acest caz va fi vorba de proprietatea src. Valoarea acestei proprietati este data de parametrul obiect al functiei ce va contine obiectul target si legat de acesta proprietatea result. In acest fel am parcurs doua obiecte pana am ajuns la proprietatea result. A doua linie de cod va reprezenta adaugarea elementului imagine in DOM cu ajutorul metodei appendChild() ce va avea ca argument exact elementul obiect imagine.

Sub aceasta functie copil vom citi in baza 64 continutul fisierului imagine cu ajutorul metodei readAsDataURL(). Aceasta metoda va avea un singur argument iar acesta va fi primul fisier incarcat, reprezentat in script-ul nostru de parametrul obiect al functiei urmat de un alt obiect copil din acesta, obiectul target si binenteles obiect-ul array files caruia ii vom accesa prima valoare.

Cu aceasta linie de cod am incheiat functia noastra parinte. Singurul lucru care ne-a mai ramas este sa executam aceasta functie in momentul cand este declansat evenimentul change pe campul de input de tip file exact ca in codul de mai jos.