Come caricare un'immagine semplice usando JavaScript e HTML

JavaScript è lo strumento più potente che fornisce una vasta gamma di funzioni. Aiuta a migliorare le immagini per la valutazione, l'analisi e l'interpretazione umana. Più specificamente, nello sviluppo web, le immagini svolgono un ruolo cruciale. Le informazioni sotto forma di immagini possono essere estratte ed elaborate dalle immagini per la valutazione computerizzata. I pixel nell'immagine dichiarata possono essere gestiti e controllati a qualsiasi contrasto e densità desiderati.

Questo articolo dimostrerà il metodo per caricare l'immagine usando JavaScript e HTML.

Come caricare un'immagine semplice usando JavaScript/HTML?

Per caricare un'immagine semplice utilizzando JavaScript, prima aggiungeremo un tag immagine nella pagina HTML e quindi utilizzare il codice JavaScript per caricare e selezionare l'immagine nella pagina Web.

Per implicazioni pratiche, prova le istruzioni dichiarate.

Esempio

Prima di tutto, segui le istruzioni fornite:

• Inserire il ""Elemento e specificare il tipo di input come"file".
• Questo tipo di "file" determina il campo nella selezione del file e a "NavigarePulsante "per caricare i file.
• "
  "Il tag inserisce una rottura della linea.
• Quindi, inserire un “"Tag HTML e aggiungi il"id"Attributo per specificare l'ID univoco con un nome particolare.
• "src"Attributo usato per aggiungere l'URL del file multimediale:

Si può notare che è stata creata un'opzione file e può visualizzare il nome dell'immagine solo dopo averlo accettato un input:

Ora, dentro il ""Tag, utilizza il seguente codice:

Nel frammento di codice sopra:

• "addEventListener ()"Il metodo JavaScript consente l'inserimento o l'attacco di un gestore di eventi definiti a un elemento.
• "QuerySelector ()"È un metodo utilizzato per restituire il primo elemento nel particolare documento che si collega al particolare selettore.
• "getElementById ()"Il metodo viene utilizzato per ottenere l'elemento utilizzando l'ID definito. A tale scopo, il valore dell'Is è passato come parametro.
• "revokeObjectUrl ()"Rilascia un URL oggetto esistente creato utilizzando l'URL. Per fare ciò, l'URL dell'immagine viene passato come parametro di questo metodo.
• "CreateObjectUrl ()"È un metodo statico JavaScript che rende una stringa particolare ha un URL che rappresenta l'oggetto passato nel parametro.

Produzione

Si può notare che abbiamo caricato correttamente un'immagine semplice.

Conclusione

Per caricare l'immagine semplice usando JavaScript, usa il “addEventListener ()"Metodo che consente di inserire o collegare un gestore di eventi definiti a un elemento. Quindi, accedi all'elemento definito tramite ID e utilizza il "revokeObjectUrl ()" E "CreateObjectUrl ()"Metodi. Questo post ha dichiarato il semplice metodo di caricamento delle immagini utilizzando JavaScript/HTML.