Ovaj tekst će pokazati metodu za učitavanje slike pomoću JavaScripta i HTML-a.
Kako učitati jednostavnu sliku koristeći JavaScript/HTML?
Za prijenos jednostavne slike pomoću JavaScripta prvo ćemo dodati oznaku slike na HTML stranicu, a zatim ćemo upotrijebiti JavaScript kod za učitavanje i odabir slike na web stranici.
Za praktične implikacije, isprobajte navedene upute.
Primjer
Prije svega, slijedite dane upute:
- Umetnite '
' i navedite vrstu unosa kao ' datoteka ”. - Ova vrsta 'datoteke' određuje polje u izboru datoteke i ' pretraživati ” za učitavanje datoteka.
- “
” umeće prijelom retka. - Zatim umetnite '
' HTML oznaku i dodajte ' iskaznica ” za određivanje jedinstvenog ID-a s određenim imenom.
- “ src ” atribut koji se koristi za dodavanje URL-a medijske datoteke:
< br >
< img id = 'moja slika' src = '#' >
Može se primijetiti da je stvorena opcija datoteke i može prikazati naziv slike samo nakon prihvaćanja unosa:
Sada, unutar '
< skripta >
prozor. addEventListener ( 'opterećenje' , funkcija ( ) {
dokument. querySelector ( 'unos[type='file']' ) . addEventListener ( 'promijeniti' , funkcija ( ) {
ako ( ovaj . datoteke && ovaj . datoteke [ 0 ] ) {
varimg = dokument. getElementById ( 'img_content' ) ;
img. onload = ( ) => {
URL . revokeObjectURL ( img. src ) ;
}
img. src = URL . createObjectURL ( ovaj . datoteke [ 0 ] ) ;
}
} ) ;
} ) ;
skripta >
U gornjem isječku koda:
- “ addEventListener() ” JavaScript metoda dopušta umetanje ili pripajanje definiranog rukovatelja događajima elementu.
- “ querySelector() ” je metoda koja se koristi za vraćanje prve stavke u određenom dokumentu koja se povezuje s određenim selektorom.
- “ getElementById() ” metoda se koristi za dobivanje elementa pomoću definiranog ID-a. U tu svrhu, vrijednost se prosljeđuje kao parametar.
- “ opozivObjectURL() ” oslobađa postojeći URL objekta stvoren korištenjem URL-a. Da biste to učinili, URL slike prosljeđuje se kao parametar ove metode.
- “ createObjectURL() ” je JavaScript statička metoda koja omogućuje da određeni niz ima URL koji predstavlja objekt proslijeđen u parametru.
Izlaz
Može se primijetiti da smo uspješno prenijeli jednostavnu sliku.
Zaključak
Za prijenos jednostavne slike pomoću JavaScripta upotrijebite ' addEventListener() ” metoda koja dopušta umetanje ili pripajanje definiranog rukovatelja događajem elementu. Zatim pristupite definiranom elementu pomoću ID-a i upotrijebite ' opozivObjectURL() ' i ' createObjectURL() ” metode. Ovaj post navodi jednostavnu metodu učitavanja slika pomoću JavaScripta/HTML-a.