Como validar múltiplas imagens com JavaScript
Neste tutorial, será apresentado como validar múltiplas imagens com JavaScript.
Primeiramente, será mostrado como criar o formulário com o campo de upload de imagens.
Em seguida, será apresentado como receber múltiplas imagens com JavaScript.
Por fim, será mostrado como validar imagens com JavaScript e enviar a mensagem de imagem inválida para o HTML.
Download do código fonte desenvolvido na aula: Download
Curso de PHP Developer: Mais Detalhes do Curso
Playlist completa sobre upload de imagem com JavaScript: Acessar
Receber as aulas gratuitas do curso de PHP Developer: Acessar
Para começar, é criado o arquivo "index.php" com a estrutura básica do HTML.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Celke</title>
</head>
<body>
// Conteúdo da página
</body>
</html>Criado o formulário e o seletor para receber as mensagens do JavaScript.
<!-- Receber mensagem de sucesso ou erro -->
<span id="msg"></span>
<!-- Inicio do formulário -->
<form>
<!-- Campo para selecionar arquivo -->
<input type="file" name="inputImagens" id="inputImagens" multiple accept="image/*">
<!--<input type="file" name="inputImagens" id="inputImagens" multiple>-->
</form>
<!-- Fim do formulário -->No JavaScript, implementado para receber as imagens do formulário, validar as imagens e enviar a mensagem de imagem válida ou inválida para o HTML.
<script>
// Receber o seletor do campo com as imagens
const inputImagens = document.getElementById("inputImagens");
// Receber o seletor para enviar a mensagem
const msg = document.getElementById("msg");
// Aguardar alteração no campo de imagens
inputImagens.addEventListener("change", function (e) {
// Limpar o seletor que recebe as mensagens
msg.innerHTML = "";
// Lista de extensões de arquivo permitido
var extensaoPermitida = ["image/jpeg", "image/png"];
// Percorrer a lista de arquivos selecionados
for (const arquivo of e.target.files) {
//console.log(arquivo);
// Verificar se a extensão do arquivo é válida
if (extensaoPermitida.includes(arquivo.type)) {
// Criar a mensagem de erro
var msgHTML = `<p style='color: green;'>O arquivo ${arquivo.name} é uma imagem válida!</p>`;
// Enviar para o HTML a mensagem, beforeend - adicionar a mensagem no final
msg.insertAdjacentHTML("beforeend", msgHTML);
} else {
// Criar a mensagem de erro
var msgHTML = `<p style='color: #f00;'>Erro: O arquivo ${arquivo.name} não é uma imagem válida. Necessário selecionar uma imagem JPG ou PNG!</p>`;
// Enviar para o HTML a mensagem, beforeend - adicionar a mensagem no final
msg.insertAdjacentHTML("beforeend", msgHTML);
}
}
});
</script>Baixar o código-fonte completo do projeto.
Bom, era isso. Espero que o tutorial tenha sido útil!