Este artigo demonstrará o método para carregar a imagem usando JavaScript e HTML.
Como fazer upload de uma imagem simples usando JavaScript/HTML?
Para fazer upload de uma imagem simples usando JavaScript, primeiro adicionaremos uma tag de imagem na página HTML e, em seguida, utilizaremos o código JavaScript para carregar e selecionar a imagem na página da web.
Para implicações práticas, experimente as instruções indicadas.
Exemplo
Em primeiro lugar, siga as instruções dadas:
- Insira o '
” elemento e especifique o tipo de entrada como “ arquivo ”. - Este tipo de “arquivo” determina o campo na seleção de arquivo e um “ Navegar ” para carregar os arquivos.
- “
” insere uma quebra de linha. - Em seguida, insira um “ ” Tag HTML e adicione o “ eu ia ” para especificar o id exclusivo com um nome específico.
- “ origem ” atributo usado para adicionar a URL do arquivo de mídia:
< br >
< ID da imagem = 'minha imagem' origem = '#' >
Pode-se notar que uma opção de arquivo foi criada e só pode exibir o nome da imagem após aceitar uma entrada:
Agora, dentro do “ ” , utilize o seguinte código:
< roteiro >
janela. addEventListener ( 'carregar' , função ( ) {
documento. querySelector ( 'entrada[tipo='arquivo']' ) . addEventListener ( 'mudar' , função ( ) {
se ( esse . arquivos && esse . arquivos [ 0 ] ) {
variável = documento. getElementById ( 'img_content' ) ;
imagem carregando = ( ) => {
URL . revokeObjectURL ( imagem origem ) ;
}
imagem origem = URL . criarObjectURL ( esse . arquivos [ 0 ] ) ;
}
} ) ;
} ) ;
roteiro >
No trecho de código acima:
- “ addEventListener() ” O método JavaScript permite inserir ou anexar um manipulador de eventos definido a um elemento.
- “ querySelector() ” é um método usado para retornar o primeiro item no documento específico vinculado ao seletor específico.
- “ getElementById() ” é utilizado para obter o elemento usando o id definido. Para isso, o valor de é passado como parâmetro.
- “ revokeObjectURL() ” libera um URL de objeto existente criado usando o URL. Para isso, a URL da imagem é passada como parâmetro deste método.
- “ criarObjectURL() ” é um método estático do JavaScript que faz com que uma determinada string tenha uma URL que representa o objeto passado no parâmetro.
Saída
Pode-se notar que carregamos com sucesso uma imagem simples.
Conclusão
Para carregar a imagem simples usando JavaScript, use o “ addEventListener() ” que permite inserir ou anexar um manipulador de eventos definido a um elemento. Em seguida, acesse o elemento definido por id e utilize o “ revokeObjectURL() ' e ' criarObjectURL() ' métodos. Este post declarou o método de upload de imagem simples usando JavaScript/HTML.