Validation de la taille du fichier lors du téléchargement à l'aide de JavaScript / jQuery

Validation De La Taille Du Fichier Lors Du Telechargement A L Aide De Javascript / Jquery



La validation des données est une partie essentielle de toute application Web car elle permet de garantir que les données téléchargées répondent à certaines exigences imposées par les développeurs. Les données peuvent être validées côté serveur et côté client, mais la validation côté client fait souvent gagner du temps aux utilisateurs et offre une expérience utilisateur plus agréable et plus fluide. La validation des données côté client peut être effectuée facilement et prend beaucoup moins de temps.

Dans ce guide pratique, nous allons passer par le processus de création d'un formulaire en utilisant HTML, JavaScript/jQuery qui valide le fichier de la taille au fur et à mesure qu'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 respectent strictement nos exigences. Si le fichier n'est pas de la bonne taille, nous pouvons envoyer un message à l'utilisateur sans télécharger le fichier sur le serveur, ce qui permet de gagner un temps précieux.







Créer une page Web

Tout d'abord, nous allons créer une page Web HTML simple :



< ! DOCTYPE html >
< html >
< tête >
< Titre >
Validation de dossier Taille tandis que téléchargement à l'aide de JavaScript / jQuery
Titre >
tête >
< corps style = 'padding-top : 10px ; text-align:center ;' >


< p > Télécharger un dossier p >
< saisir identifiant = 'dossier' taper = 'dossier' style = 'padding-gauche : 95px ;' />
< Br >< Br >

< bouton sur clic = 'tailleValidation()' > Télécharger bouton >

corps >
html >



Comprendre le code :



Dans le corps de la page Web, nous avons simplement utilisé un

, ,
et un étiquette. La La balise est utilisée pour que l'utilisateur puisse choisir un fichier, puis le télécharger à l'aide du bouton affiché à l'aide de la étiquette.





La la balise appelle le sizeValidation() fonction sur l'événement de clic qui détermine alors 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.



< scénario >

fonction sizeValidation ( ) {
var entrée = document.getElementById ( 'dossier' ) ;
a été dossier = input.files;
si ( fichier.longueur== 0 ) {
alerte ( 'Aucun fichier choisi' ) ;
revenir faux ;
}


var fileSize = Math.round ( ( dossier [ 0 ] .Taille / 1024 ) ) ;

si ( taille du fichier < = 5 * 1024 ) {
alerte ( 'Téléchargé' ) ;
} autre {
alerte (
'Erreur ! Fichier trop volumineux' ) ;
}
}

scénario >


Comprendre le code :

A l'intérieur du corps du sizeValidation() fonction, nous obtenons d'abord la balise , puis utilisons la var file = inputElement.files; ligne afin que nous puissions avoir accès au fichier en cours de téléchargement. Ensuite, nous vérifions si un fichier a été téléchargé, sinon, nous afficherons un message d'erreur et sortirons de la fonction en retournant false.


Nous utilisons ensuite quelques mathématiques pour déterminer la taille du fichier. Si le fichier est de taille appropriée, c'est-à-dire 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 pas la validation côté serveur et peut être contournée dans la plupart des cas. Il est toujours recommandé d'implémenter la validation côté serveur et côté client afin de garantir à la fois l'efficacité et la précision de votre application.