Questo articolo dimostrerà il metodo per caricare l'immagine utilizzando JavaScript e HTML.
Come caricare un'immagine semplice utilizzando JavaScript/HTML?
Per caricare un'immagine semplice utilizzando JavaScript, per prima cosa aggiungeremo un tag immagine nella pagina HTML e quindi utilizzeremo il codice JavaScript per caricare e selezionare l'immagine nella pagina web.
Per implicazioni pratiche, provare le istruzioni indicate.
Esempio
Prima di tutto, segui le istruzioni fornite:
- Inserisci il ' ” e specificare il tipo di input come “ file ”.
- Questo tipo di 'file' determina il campo nella selezione file e un ' Navigare ” per caricare i file.
- “
Il tag ” inserisce un'interruzione di riga. - Quindi, inserisci un '
” tag HTML e aggiungi il “ id ” per specificare l'ID univoco con un nome particolare. - “ src ” attributo utilizzato per aggiungere l'URL del file multimediale:
< fratello >
< img id = 'miaImmagine' src = '#' >
Si può notare che è stata creata un'opzione file e può visualizzare il nome dell'immagine solo dopo aver accettato un input:
Ora, all'interno del “
< copione >
finestra. addEventListener ( 'carico' , funzione ( ) {
documento. querySelector ( 'input[tipo='file']' ) . addEventListener ( 'modifica' , funzione ( ) {
Se ( Questo . File && Questo . File [ 0 ] ) {
varimg = documento. getElementById ( 'img_content' ) ;
imm. onload = ( ) => {
URL . revocaOggettoURL ( imm. src ) ;
}
imm. src = URL . createObjectURL ( Questo . File [ 0 ] ) ;
}
} ) ;
} ) ;
copione >
Nello snippet di codice sopra:
- “ addEventListener() Il metodo JavaScript consente di inserire o allegare un gestore di eventi definito a un elemento.
- “ querySelector() ” è un metodo che viene utilizzato per restituire il primo elemento nel particolare documento che si collega con il particolare selettore.
- “ getElementById() Il metodo ” viene utilizzato per ottenere l'elemento utilizzando l'id definito. A tale scopo, il valore di viene passato come parametro.
- “ revocaOggettoURL() ” rilascia un URL oggetto esistente creato utilizzando l'URL. Per fare ciò, l'URL dell'immagine viene passato come parametro di questo metodo.
- “ creaURLOggetto() ' è un metodo statico JavaScript che fa in modo che una determinata stringa abbia un URL che rappresenta l'oggetto passato nel parametro.
Produzione
Si può notare che abbiamo caricato con successo una semplice immagine.
Conclusione
Per caricare l'immagine semplice utilizzando JavaScript, utilizzare il ' addEventListener() ” metodo che consente di inserire o allegare un gestore di eventi definito a un elemento. Quindi, accedi all'elemento definito tramite id e utilizza il ' revocaOggettoURL() ' E ' creaURLOggetto() metodi. Questo post indicava il semplice metodo di caricamento delle immagini utilizzando JavaScript/HTML.