Validering av filstørrelse mens du laster opp ved hjelp av JavaScript / jQuery
Datavalidering er en viktig del av enhver webapplikasjon, da det hjelper til med å sikre at dataene som lastes opp, passer til visse krav som er stilt av utviklerne. Data kan valideres på både server- og klientsiden, men validering av klientsiden sparer ofte brukernes tid og viser seg finere, jevnere brukeropplevelse. Validering av klientsiden kan gjøres enkelt og bruker mye mindre tid.
I denne hvordan-do-guiden vil vi gå gjennom prosessen med å lage et skjema ved hjelp av HTML, JavaScript/JQuery som validerer filen til størrelsen når den lastes opp. Fordelen med denne valideringen er at vi bare kan begrense brukerne til å laste opp en viss størrelse på filer og sørge for at de strengt følger kravene våre. Hvis filen har feil størrelse, kan vi be om en melding til brukeren uten å laste opp filen til serveren som sparer dyrebar tid.
Lag webside
Først oppretter vi en enkel HTML -webside:
<br>Validering av filstørrelse mens du laster opp ved hjelp av JavaScript / jQuery<br> Last opp en fil
Forstå koden:
I kroppen på websiden har vi ganske enkelt brukt en , ,
og a stikkord. De Tag brukes slik at brukeren kan velge en fil og deretter laste den opp ved hjelp av knappen som vises ved å bruke stikkord.
De Tag kaller sizevalidation () Funksjon på klikkhendelse som deretter bestemmer størrelsen på filen og skriver ut et passende varsel avhengig av størrelsen på filen.
Definer JavaScript sizevalidation () -funksjon
La oss nå skrive JavaScript -koden som definerer sizevalidation () funksjon.
Forstå koden:
Inne i kroppen til sizevalidation () funksjon Vi får først taggen og bruker deretter var fil = inputElement.filer; linje slik at vi kan få tilgang til filen som blir lastet opp. Så sjekker vi om en fil er lastet opp, hvis ikke, vil vi be om en feilmelding og komme ut av funksjonen ved å returnere falsk.
Vi bruker deretter noen matematikk for å bestemme størrelsen på filen. Hvis filen er av passende størrelse I.e., 5MB (i dette tilfellet) er det lastet opp.
Ellers vises en pop-up som inneholder en feilmelding.
Konklusjon
Selv om validering av klientsiden er mye mer effektiv, er det fremdeles ikke en erstatning for validering av serversiden og kan omgås i de fleste tilfeller. Det er alltid en god praksis å implementere både server- og klientsiden-validering, slik at du kan sikre både effektivitet og nøyaktighet av applikasjonen din.