Tento zápis demonstruje způsob nahrání obrázku pomocí JavaScriptu a HTML.
Jak nahrát jednoduchý obrázek pomocí JavaScriptu/HTML?
Chcete-li nahrát jednoduchý obrázek pomocí JavaScriptu, nejprve přidáme značku obrázku na stránku HTML a poté použijeme kód JavaScript k načtení a výběru obrázku na webovou stránku.
Pro praktické důsledky vyzkoušejte uvedené pokyny.
Příklad
Nejprve postupujte podle uvedených pokynů:
- Vložte „
” a zadejte typ vstupu jako “ soubor “. - Tento typ „souboru“ určuje pole ve výběru souboru a „ Procházet ” tlačítko pro nahrání souborů.
- “
Značka ” vloží zalomení řádku. - Poté vložte „ ” HTML tag a přidejte “ id ” k určení jedinečného ID s konkrétním názvem.
- “ src ” atribut používaný k přidání adresy URL mediálního souboru:
< br >
< img id = 'můj obrázek' src = '#' >
Můžete si všimnout, že byla vytvořena možnost souboru a může zobrazit název obrázku pouze po přijetí vstupu:
Nyní uvnitř „ “, použijte následující kód:
< skript >
okno. addEventListener ( 'zatížení' , funkce ( ) {
dokument. querySelector ( 'input[type='file']' ) . addEventListener ( 'změna' , funkce ( ) {
-li ( tento . soubory && tento . soubory [ 0 ] ) {
varimg = dokument. getElementById ( 'img_content' ) ;
img. načíst = ( ) => {
URL . revokeObjectURL ( img. src ) ;
}
img. src = URL . createObjectURL ( tento . soubory [ 0 ] ) ;
}
} ) ;
} ) ;
skript >
Ve výše uvedeném úryvku kódu:
- “ addEventListener() ” Metoda JavaScriptu umožňuje vložení nebo připojení definovaného ovladače události k prvku.
- “ querySelector() ” je metoda, která se používá k vrácení první položky v konkrétním dokumentu, která je propojena s konkrétním selektorem.
- “ getElementById() ” metoda se používá pro získání prvku pomocí definovaného id. Za tímto účelem se jako parametr předává hodnota the.
- “ revokeObjectURL() ” uvolní existující URL objektu vytvořené pomocí URL. Za tímto účelem je jako parametr této metody předána adresa URL obrázku.
- “ createObjectURL() ” je statická metoda JavaScriptu, díky které má konkrétní řetězec adresu URL, která představuje objekt předaný v parametru.
Výstup
Je vidět, že jsme úspěšně nahráli jednoduchý obrázek.
Závěr
Chcete-li nahrát jednoduchý obrázek pomocí JavaScriptu, použijte „ addEventListener() ” metoda, která umožňuje vložení nebo připojení definované obsluhy události k prvku. Poté přistupte k definovanému prvku pomocí id a použijte „ revokeObjectURL() ' a ' createObjectURL() “ metody. Tento příspěvek uvádí jednoduchou metodu nahrávání obrázků pomocí JavaScript/HTML.