Tento zápis demonštruje spôsob nahrávania obrázka pomocou JavaScriptu a HTML.
Ako nahrať jednoduchý obrázok pomocou JavaScriptu/HTML?
Ak chcete nahrať jednoduchý obrázok pomocou JavaScriptu, najprv na stránku HTML pridáme značku obrázka a potom použijeme kód JavaScript na načítanie a výber obrázka na webovú stránku.
Pre praktické dôsledky vyskúšajte uvedené pokyny.
Príklad
Najprv postupujte podľa uvedených pokynov:
- Vložte „
” a špecifikujte typ vstupu ako “ súbor “. - Tento typ „súboru“ určuje pole vo výbere súboru a Prehľadávať ” tlačidlo na odovzdanie súborov.
- “
” tag vloží zalomenie riadku. - Potom vložte „ ” HTML tag a pridajte “ id ” na určenie jedinečného ID s konkrétnym názvom.
- “ src ” atribút používaný na pridanie adresy URL mediálneho súboru:
< br >
< img id = 'môj obrázok' src = '#' >
Je možné si všimnúť, že bola vytvorená možnosť súboru a môže zobraziť názov obrázka iba po prijatí vstupu:
Teraz vo vnútri „ “, použite nasledujúci kód:
< skript >
okno. addEventListener ( 'naložiť' , funkcia ( ) {
dokument. querySelector ( 'input[type='file']' ) . addEventListener ( 'zmena' , funkcia ( ) {
ak ( toto . súbory && toto . súbory [ 0 ] ) {
varimg = dokument. getElementById ( 'img_content' ) ;
img. načítať = ( ) => {
URL . revokeObjectURL ( img. src ) ;
}
img. src = URL . createObjectURL ( toto . súbory [ 0 ] ) ;
}
} ) ;
} ) ;
skript >
Vo vyššie uvedenom útržku kódu:
- “ addEventListener() ” JavaScriptová metóda umožňuje vložiť alebo pripojiť definovanú obsluhu udalosti k prvku.
- “ querySelector() ” je metóda, ktorá sa používa na vrátenie prvej položky v konkrétnom dokumente, ktorá je prepojená s konkrétnym selektorom.
- “ getElementById() ” metóda sa používa na získanie prvku pomocou definovaného id. Na tento účel sa ako parameter odovzdá hodnota.
- “ revokeObjectURL() “ uvoľní existujúcu adresu URL objektu vytvorenú pomocou adresy URL. Na tento účel sa ako parameter tejto metódy odovzdá adresa URL obrázka.
- “ createObjectURL() ” je statická metóda JavaScriptu, vďaka ktorej má konkrétny reťazec adresu URL, ktorá predstavuje objekt odovzdaný v parametri.
Výkon
Možno si všimnúť, že sme úspešne nahrali jednoduchý obrázok.
Záver
Ak chcete nahrať jednoduchý obrázok pomocou JavaScriptu, použite „ addEventListener() ” metóda, ktorá umožňuje vloženie alebo pripojenie definovanej obsluhy udalosti k prvku. Potom pristupujte k definovanému prvku pomocou id a použite „ revokeObjectURL() “ a „ createObjectURL() “ metódy. Tento príspevok uvádza jednoduchú metódu nahrávania obrázkov pomocou JavaScript/HTML.