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:

Enviar um arquivo

Carregar

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.