Como fazer upload de imagem simples usando javascript e html

JavaScript é a ferramenta mais poderosa que fornece uma ampla gama de funções. Auxilia a melhorar imagens para avaliação, análise e interpretação humanas. Mais especificamente, no desenvolvimento da web, as imagens desempenham um papel crucial. Informações na forma de imagens podem ser extraídas e processadas a partir de imagens para avaliação computadorizada. Os pixels na imagem declarada podem ser manuseados e controlados com qualquer contraste e densidade desejados.

Este artigo demonstrará o método para fazer upload da 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 depois 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 declaradas.

Exemplo

Primeiro de tudo, siga as instruções dadas:

• Insira o "”Elemento e especifique o tipo de entrada como“arquivo”.
• Esse tipo de "arquivo" determina o campo no seleto de arquivo e um "Navegar”Botão para fazer upload dos arquivos.
• ““
  ”Tag insere uma quebra de linha.
• Então, insira um “”Tag html e adicione o“eu ia”Atributo para especificar o ID exclusivo com um nome específico.
• ““src”Atributo usado para adicionar o URL do arquivo de mídia:

Pode -se notar que uma opção de arquivo foi criada e só pode exibir o nome da imagem depois de aceitá -lo uma entrada:

Agora, dentro do “”Tag, utilize o seguinte código:

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 que se vincula ao seletor específico.
• ““getElementById ()”O método é utilizado para obter o elemento usando o ID definido. Para esse fim, o valor do é passado como o parâmetro.
• ““RevokeObjecturl ()”Libera um URL de objeto existente criado usando o URL. Para fazer isso, o URL da imagem é passado como o parâmetro deste método.
• ““CreateObjecturl ()”É um método estático JavaScript que faz com que uma string específica tenha um URL que represente o objeto passado no parâmetro.

Saída

Pode -se notar que carregamos com sucesso uma imagem simples.

Conclusão

Para fazer upload da imagem simples usando JavaScript, use o “addEventListener ()”Método que permite a inserção ou a anexação de um manipulador de eventos definido a um elemento. Em seguida, acesse o elemento definido por id e utilize o “RevokeObjecturl ()" e "CreateObjecturl ()" métodos. Esta postagem afirmou o método de upload de imagem simples usando JavaScript/HTML.