Acest articol va demonstra metoda de încărcare a imaginii folosind JavaScript și HTML.
Cum să încarci o imagine simplă folosind JavaScript/HTML?
Pentru a încărca o imagine simplă folosind JavaScript, mai întâi, vom adăuga o etichetă de imagine în pagina HTML și apoi vom folosi codul JavaScript pentru a încărca și selecta imaginea în pagina web.
Pentru implicații practice, încercați instrucțiunile menționate.
Exemplu
În primul rând, urmați instrucțiunile date:
- Introduceți „ ” și specificați tipul de intrare ca „ fişier ”.
- Acest tip de „fișier” determină câmpul din fișierul de selectare și un „ Naviga ” pentru încărcarea fișierelor.
- „
” eticheta inserează o întrerupere de linie. - Apoi, introduceți un „ ” etichetă HTML și adăugați „ id ” pentru a specifica id-ul unic cu un anumit nume.
- „ src ” atribut folosit pentru a adăuga adresa URL a fișierului media:
< br >
< id img = „Imaginea mea” src = '#' >
Se poate observa că a fost creată o opțiune de fișier și poate afișa numele imaginii numai după ce a acceptat o intrare:
Acum, în interiorul „ ”, utilizați următorul cod:
< scenariu >
fereastră. addEventListener ( 'sarcină' , funcție ( ) {
document. querySelector ( 'input[type='fișier']' ) . addEventListener ( 'Schimbare' , funcție ( ) {
dacă ( acest . fişiere && acest . fişiere [ 0 ] ) {
varimg = document. getElementById ( 'img_content' ) ;
img. onload = ( ) => {
URL . revokeObjectURL ( img. src ) ;
}
img. src = URL . createObjectURL ( acest . fişiere [ 0 ] ) ;
}
} ) ;
} ) ;
scenariu >
În fragmentul de cod de mai sus:
- „ addEventListener() ” Metoda JavaScript permite inserarea sau atașarea unui handler de evenimente definit la un element.
- „ querySelector() ” este o metodă care este utilizată pentru a returna primul articol din documentul anume care se leagă cu selectorul anume.
- „ getElementById() ” este utilizată pentru obținerea elementului folosind id-ul definit. În acest scop, valoarea lui este transmisă ca parametru.
- „ revokeObjectURL() ” eliberează o adresă URL a obiectului existent creat utilizând adresa URL. Pentru a face acest lucru, adresa URL a imaginii este transmisă ca parametru al acestei metode.
- „ createObjectURL() ” este o metodă statică JavaScript care face ca un anumit șir să aibă o adresă URL care reprezintă obiectul transmis în parametru.
Ieșire
Se poate observa că am încărcat cu succes o imagine simplă.
Concluzie
Pentru a încărca imaginea simplă folosind JavaScript, utilizați „ addEventListener() ” metodă care permite inserarea sau atașarea unui handler de evenimente definit la un element. Apoi, accesați elementul definit prin id și utilizați „ revokeObjectURL() ' și ' createObjectURL() ” metode. Această postare a indicat metoda simplă de încărcare a imaginilor folosind JavaScript/HTML.