Neste artigo você vai aprender a como validar tamanho de arquivo com JavaScript, utilizando apenas recursos nativos da linguagem
Fala programador(a), beleza? Bora aprender mais sobre validação de arquivos com JavaScript!
É importante a validação de tamanho, pois podemos lotar nosso servidor desnecessarimente com imagens muito grande
Esta validação pode ser disparada no evento de change do input de arquivos
Lá pegaremos o arquivo e detectaremos o valor da propriedade size
Como o tamanho é de dado em bytes, vou converter para mb, isso deixa nosso código mais simples
Veja o código necessário:
const input = document.querySelector("#image-input")
input.addEventListener("change", function(e) {
const fileSize = e.target.files[0].size / 1024 / 1024; // para mb
if (fileSize > 3) {
console.log("O arquivo tem mais de 3mb!")
}
})Primeiramente selecionamos o input e depois inserimos o evento nele
No evento é verificado o tamanho, que podemo ser encontrado na propriedade size
Depois no if é feita a impressão da mensagem de validação
Você deve trocar os valores para que o seu projeto seja atendido
Deixe um comentário contando o que achou desta solução 🙂
Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:
Conclusão
No artigo de hoje você aprendeu a como validar tamanho de arquivo com JavaScript
Utilizamos o evento change no input, que detecta quando o usuário adiciona o arquivo
Depois bastou verificar a propriedade de tamanho do mesmo, que é a size
Deseja programar de forma profissional? Confira o nosso treinamento completo clicando aqui.
Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!
Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!