Az adatellenőrzés minden webes alkalmazás elengedhetetlen része, mivel segít biztosítani, hogy a feltöltött adatok megfeleljenek a fejlesztők által támasztott bizonyos követelményeknek. Az adatok kiszolgáló- és kliensoldalon is érvényesíthetők, de az ügyféloldali érvényesítés gyakran időt takarít meg a felhasználók számára, és szebb, gördülékenyebb felhasználói élményt biztosít. Az ügyféloldali adatellenőrzés egyszerűen elvégezhető, és sokkal kevesebb időt vesz igénybe.
Ebben az útmutatóban egy űrlap létrehozásának folyamatán megyünk keresztül HTML, JavaScript/jQuery használatával, amely ellenőrzi a fájl méretét a feltöltés során. Ennek az ellenőrzésnek az az előnye, hogy korlátozhatjuk a felhasználókat, hogy csak bizonyos méretű fájlokat töltsenek fel, és gondoskodhatunk arról, hogy szigorúan betartsák követelményeinket. Ha a fájl mérete nem megfelelő, akkor üzenetet küldhetünk a felhasználónak anélkül, hogy feltöltenénk a fájlt a szerverre, ezzel értékes időt takaríthatunk meg.
Weboldal létrehozása
Először létrehozunk egy egyszerű HTML weboldalt:
DOCTYPE html >
< html >
< fej >
< cím >
Érvényesítése fájlt méret míg feltöltés JavaScript segítségével / jQuery
cím >
fej >
< test stílus = 'padding-top: 10px; text-align:center;' >
< p > Feltöltés a fájlt p >
< bemenet id = 'fájl' típus = 'fájl' stílus = 'padding-left: 95px;' />
< br >< br >
< gomb kattintásra = 'sizeValidation()' > Feltöltés gomb >
test >
html >
A kód értelmezése:
A weboldal törzsében egyszerűen az a ,
és a
Az
Határozza meg a JavaScript sizeValidation() függvényt
Most írjuk meg a JavaScript kódot, amely meghatározza a sizeValidation() funkció.
< forgatókönyv >
funkció méretEllenőrzés ( ) {
var input = document.getElementById ( 'fájl' ) ;
volt fájlt = bemenet.fájlok;
ha ( file.length== 0 ) {
éber ( 'Nincs kiválasztva fájl' ) ;
Visszatérés hamis ;
}
var fileSize = Math.round ( ( fájlt [ 0 ] .méret / 1024 ) ) ;
ha ( fájl méret < = 5 * 1024 ) {
éber ( 'Feltöltve' ) ;
} más {
éber (
'Hiba! A fájl túl nagy' ) ;
}
}
forgatókönyv >
A kód értelmezése:
A test belsejében a sizeValidation() függvényben először megkapjuk az címkét, majd használjuk a var file = inputElement.files; sort, hogy hozzáférhessünk a feltöltött fájlhoz. Ezután ellenőrizzük, hogy feltöltött-e egy fájlt, ha nem, akkor hibaüzenetet küldünk, és a false visszaadásával kilépünk a függvényből.
Ezután néhány matematikai módszerrel meghatározzuk a fájl méretét. Ha a fájl megfelelő méretű, azaz 5 MB (ebben az esetben), akkor a rendszer feltölti.
Ellenkező esetben egy hibaüzenetet tartalmazó felugró ablak jelenik meg.
Következtetés
Annak ellenére, hogy az ügyféloldali érvényesítés sokkal hatékonyabb, még mindig nem helyettesíti a szerveroldali érvényesítést, és a legtöbb esetben megkerülhető. Mindig az a legjobb gyakorlat, ha mind a szerver-, mind a kliensoldali érvényesítést alkalmazza, így biztosíthatja alkalmazása hatékonyságát és pontosságát.