Validation de la taille du fichier lors du téléchargement à l'aide de JavaScript / jQuery
La validation des données est un élément essentiel de toute application Web car elle permet de garantir que les données téléchargées correspondent à certaines exigences imposées par les développeurs. Les données peuvent être validées du côté du serveur et du client, mais la validation côté client fait souvent gagner du temps des utilisateurs et prouve une expérience utilisateur plus agréable et plus fluide. La validation des données côté client peut être effectuée facilement et consomme beaucoup moins de temps.
Dans ce guide pratiques, nous allons passer par le processus de création d'un formulaire à l'aide de HTML, JavaScript / jQuery qui valide le fichier de la taille lorsqu'il est téléchargé. L'avantage de cette validation est que nous pouvons restreindre les utilisateurs à télécharger uniquement une certaine taille de fichiers et à nous assurer qu'ils suivent strictement nos exigences. Si le fichier est de mauvaise taille, nous pouvons inviter un message à l'utilisateur sans télécharger le fichier sur le serveur, ce qui permet un temps précieux.
Créer une page Web
Tout d'abord, nous allons créer une page Web HTML simple:
<br>Validation de la taille du fichier lors du téléchargement à l'aide de JavaScript / jQuery<br> Télécharger un fichier
Comprendre le code:
Dans le corps de la page Web, nous avons simplement utilisé un , ,
et un étiqueter. Le La balise est utilisée afin que l'utilisateur puisse choisir un fichier, puis le télécharger à l'aide du bouton affiché en utilisant le étiqueter.
Le TAG appelle le sizeValidation () fonction sur l'événement de clic qui détermine ensuite la taille du fichier et imprime une alerte appropriée en fonction de la taille du fichier.
Définir la fonction JavaScript sizeValidation ()
Écrivons maintenant le code javascript qui définit le sizeValidation () fonction.
Comprendre le code:
À l'intérieur du corps du sizeValidation () fonction, nous obtenons d'abord la balise, puis utilisons le var fichier = inputElement.des dossiers; ligne pour que nous puissions accéder au fichier en cours de téléchargement. Ensuite, nous vérifions si un fichier a été téléchargé, sinon, nous inviterons un message d'erreur et sortirons de la fonction en renvoyant false.
Nous utilisons ensuite des mathématiques pour déterminer la taille du fichier. Si le fichier est de taille appropriée I.e., 5 Mo (dans ce cas), il est téléchargé.
Sinon, une fenêtre contextuelle contenant un message d'erreur s'affiche.
Conclusion
Même si la validation côté client est beaucoup plus efficace, elle ne remplace toujours pas la validation côté serveur et peut être contournée dans la plupart des cas. Il est toujours une meilleure pratique d'implémenter la validation du serveur et du côté client afin que vous puissiez assurer à la fois l'efficacité et la précision de votre application.