Preverjanje podatkov je bistveni del vsake spletne aplikacije, saj pomaga zagotoviti, da podatki, ki se nalagajo, ustrezajo določenim zahtevam, ki jih postavljajo razvijalci. Podatke je mogoče preveriti na strani strežnika in odjemalca, vendar preverjanje na strani odjemalca uporabnikom pogosto prihrani čas in se izkaže za lepšo in bolj gladko uporabniško izkušnjo. Preverjanje podatkov na strani odjemalca je mogoče izvesti enostavno in porabi veliko manj časa.
V tem vodniku z navodili bomo šli skozi postopek ustvarjanja obrazca z uporabo HTML, JavaScript/jQuery, ki preverja velikost datoteke, ko se nalaga. Prednost tega preverjanja je, da lahko uporabnikom omejimo nalaganje samo določene velikosti datotek in zagotovimo, da strogo upoštevajo naše zahteve. Če je datoteka napačne velikosti, lahko uporabniku pošljemo sporočilo, ne da bi datoteko naložili na strežnik, kar prihrani dragocen čas.
Ustvari spletno stran
Najprej bomo ustvarili preprosto spletno stran HTML:
DOCTYPE html >
< html >
< glavo >
< naslov >
Potrditev mapa velikost medtem nalaganje z uporabo JavaScripta / jQuery
naslov >
glavo >
< telo stil = 'padding-top: 10px; text-align:center;' >
< str > Naloži a mapa str >
< vnos id = 'mapa' vrsta = 'mapa' stil = 'padding-left: 95px;' />
< št >< št >
< gumb onclick = 'sizeValidation()' > Naloži gumb >
telo >
html >
Razumevanje kode:
V telesu spletne strani smo preprosto uporabili a ,
in a
The
Definirajte funkcijo JavaScript sizeValidation().
Zdaj pa napišimo kodo JavaScript, ki definira sizeValidation() funkcijo.
< scenarij >
funkcijo sizeValidation ( ) {
var input = document.getElementById ( 'mapa' ) ;
je bil mapa = vhodne.datoteke;
če ( file.length== 0 ) {
opozorilo ( 'Ni izbrana datoteka' ) ;
vrnitev lažno ;
}
var fileSize = Math.round ( ( mapa [ 0 ] .velikost / 1024 ) ) ;
če ( velikost datoteke < = 5 * 1024 ) {
opozorilo ( 'Naloženo' ) ;
} drugače {
opozorilo (
'Napaka! Datoteka je prevelika' ) ;
}
}
scenarij >
Razumevanje kode:
V notranjosti telesa sizeValidation() najprej dobimo oznako in nato uporabimo var file = inputElement.files; vrstico, da lahko dobimo dostop do datoteke, ki se nalaga. Nato preverimo, ali je bila datoteka naložena, če ni, bomo prikazali sporočilo o napaki in zapustili funkcijo tako, da vrnemo false.
Nato uporabimo nekaj matematike, da določimo velikost datoteke. Če je datoteka ustrezne velikosti, tj. 5 MB (v tem primeru), se naloži.
V nasprotnem primeru se prikaže pojavno okno s sporočilom o napaki.
Zaključek
Čeprav je preverjanje na strani odjemalca veliko bolj učinkovito, še vedno ni nadomestilo za preverjanje na strani strežnika in ga je v večini primerov mogoče zaobiti. Vedno je najboljša praksa, da implementirate preverjanje na strani strežnika in odjemalca, da lahko zagotovite učinkovitost in natančnost svoje aplikacije.