Validação do tamanho do arquivo durante o upload usando JavaScript / JQuery
A validação de dados é uma parte essencial de qualquer aplicativo da Web, pois ajuda a garantir que os dados que estão sendo carregados se encaixem em certos requisitos impostos pelos desenvolvedores. Os dados podem ser validados no lado do servidor e do cliente, mas a validação do lado do cliente geralmente salva o tempo dos usuários e se mostra melhor e mais suave experiência do usuário. A validação de dados do lado do cliente pode ser feita com facilidade e consome muito menos tempo.
Neste guia de instruções, passaremos pelo processo de criação de um formulário usando HTML, JavaScript/JQuery, que valida o arquivo do tamanho enquanto está sendo carregado. O benefício dessa validação é que podemos restringir os usuários a fazer upload de apenas um certo tamanho de arquivos e garantir que eles sigam estritamente nossos requisitos. Se o arquivo for do tamanho errado, podemos solicitar uma mensagem ao usuário sem enviar o arquivo para o servidor, que economiza tempo precioso.
Crie página da web
Primeiro, criaremos uma página da web simples HTML:
<br>Validação do tamanho do arquivo durante o upload usando JavaScript / JQuery<br> Enviar um arquivo
Compreendendo o código:
No corpo da página da web, simplesmente usamos um , ,
e a marcação. O A tag é usada para que o usuário possa escolher um arquivo e enviá -lo usando o botão exibido usando o marcação.
O tag chama o SizeValidation () função no evento de clique que determina o tamanho do arquivo e imprime um alerta apropriado, dependendo do tamanho do arquivo.
Definir função JavaScript sizeValidation ()
Agora vamos escrever o código JavaScript que define o SizeValidation () função.
Compreendendo o código:
Dentro do corpo do SizeValidation () função, primeiro recebemos a tag e depois usamos o Arquivo var = inputElement.arquivos; linha para que possamos ter acesso ao arquivo que está sendo carregado. Então verificamos se um arquivo foi enviado, se não, solicitaremos uma mensagem de erro e sairemos da função retornando false.
Em seguida, usamos alguma matemática para determinar o tamanho do arquivo. Se o arquivo for do tamanho apropriado i.e., 5 MB (neste caso), é carregado.
Caso contrário, um pop-up que contém uma mensagem de erro é exibido.
Conclusão
Embora a validação do lado do cliente seja muito mais eficiente, ainda não substitui a validação do lado do servidor e pode ser contornada na maioria dos casos. É sempre uma prática recomendada implementar a validação do servidor e do lado do cliente, para que você possa garantir a eficiência e a precisão do seu aplicativo.