Aquest escrit mostrarà el mètode per carregar la imatge mitjançant JavaScript i HTML.
Com pujar una imatge senzilla amb JavaScript/HTML?
Per carregar una imatge senzilla amb JavaScript, primer, afegirem una etiqueta d'imatge a la pàgina HTML i després utilitzarem el codi JavaScript per carregar i seleccionar la imatge a la pàgina web.
Per a implicacions pràctiques, proveu les instruccions indicades.
Exemple
En primer lloc, seguiu les instruccions donades:
- Inseriu el '
” i especifiqueu el tipus d'entrada com a “ dossier ”. - Aquest tipus de 'fitxer' determina el camp de la selecció de fitxers i un ' Navega ” per carregar els fitxers.
- “
” insereix un salt de línia. - A continuació, inseriu un ' ” Etiqueta HTML i afegiu el “ id ” per especificar l'identificador únic amb un nom concret.
- “ src ” atribut utilitzat per afegir l'URL del fitxer multimèdia:
< br >
< id img = 'la meva imatge' src = '#' >
Es pot notar que s'ha creat una opció de fitxer i només pot mostrar el nom de la imatge després d'acceptar una entrada:
Ara, dins del ' ”, utilitzeu el codi següent:
< guió >
finestra. addEventListener ( 'càrrega' , funció ( ) {
document. querySelector ( 'entrada[tipus='fitxer']' ) . addEventListener ( 'canviar' , funció ( ) {
si ( això . Fitxers && això . Fitxers [ 0 ] ) {
varimg = document. getElementById ( 'img_content' ) ;
img. carregar = ( ) => {
URL . revokeObjectURL ( img. src ) ;
}
img. src = URL . createObjectURL ( això . Fitxers [ 0 ] ) ;
}
} ) ;
} ) ;
guió >
Al fragment de codi anterior:
- “ addEventListener() ” El mètode JavaScript permet inserir o adjuntar un controlador d'esdeveniments definit a un element.
- “ querySelector() ” és un mètode que s'utilitza per retornar el primer element del document concret que enllaça amb el selector particular.
- “ getElementById() ” s'utilitza per obtenir l'element mitjançant l'identificador definit. Per a això, el valor de la es passa com a paràmetre.
- “ revokeObjectURL() ” allibera un URL d'objecte existent creat mitjançant l'URL. Per fer-ho, es passa l'URL de la imatge com a paràmetre d'aquest mètode.
- “ createObjectURL() ” és un mètode estàtic de JavaScript que fa que una cadena concreta tingui un URL que representa l'objecte passat al paràmetre.
Sortida
Es pot notar que hem pujat correctament una imatge senzilla.
Conclusió
Per carregar la imatge senzilla amb JavaScript, utilitzeu el ' addEventListener() ” mètode que permet inserir o adjuntar un controlador d'esdeveniments definit a un element. A continuació, accediu a l'element definit per id i utilitzeu el ' revokeObjectURL() ' i ' createObjectURL() ” mètodes. Aquesta publicació indicava el mètode de pujada d'imatges senzill mitjançant JavaScript/HTML.