Tiedoston koon tarkistaminen ladattaessa JavaScriptin / jQueryn avulla

Tiedoston Koon Tarkistaminen Ladattaessa Javascriptin / Jqueryn Avulla



Tietojen validointi on olennainen osa mitä tahansa verkkosovellusta, koska se auttaa varmistamaan, että ladattavat tiedot vastaavat tiettyjä kehittäjien asettamia vaatimuksia. Tiedot voidaan validoida sekä palvelin- että asiakaspuolella, mutta asiakaspuolen validointi säästää usein käyttäjien aikaa ja tarjoaa mukavamman ja sujuvamman käyttökokemuksen. Asiakaspuolen tietojen validointi voidaan tehdä helposti ja vie paljon vähemmän aikaa.

Tässä ohjeoppaassa käymme läpi lomakkeen luomisen HTML:llä, JavaScriptillä/jQueryllä, joka vahvistaa tiedoston koon sen ladatessa. Tämän tarkistuksen etuna on, että voimme rajoittaa käyttäjiä lataamaan vain tietyn kokoisia tiedostoja ja varmistaa, että he noudattavat tarkasti vaatimuksiamme. Jos tiedosto on väärän kokoinen, voimme pyytää käyttäjälle viestin lataamatta tiedostoa palvelimelle, mikä säästää arvokasta aikaa.







Luo verkkosivu

Ensin luomme yksinkertaisen HTML-verkkosivun:



DOCTYPE html >
< html >
< pää >
< otsikko >
Validointi tiedosto koko sillä aikaa lataaminen JavaScriptin avulla / jQuery
otsikko >
pää >
< kehon tyyli = 'padding-top: 10px; text-align:center;' >


< s > Lataa a tiedosto s >
< syöttö id = 'tiedosto' tyyppi = 'tiedosto' tyyli = 'padding-left: 95px;' />
< br >< br >

< -painiketta klikkaamalla = 'sizeValidation()' > Lataa -painiketta >

kehon >
html >



Koodin ymmärtäminen:



Verkkosivun rungossa olemme yksinkertaisesti käyttäneet a

, ,
ja a tag. The -tunnistetta käytetään, jotta käyttäjä voi valita tiedoston ja ladata sen sitten käyttämällä painiketta, joka näkyy käyttämällä tag.





The tag kutsuu sizeValidation() toiminto napsautustapahtumassa, joka määrittää sitten tiedoston koon ja tulostaa asianmukaisen varoituksen tiedoston koosta riippuen.

Määritä JavaScript sizeValidation() -funktio

Kirjoita nyt JavaScript-koodi, joka määrittää sizeValidation() toiminto.



< käsikirjoitus >

toiminto koonValidointi ( ) {
var input = document.getElementById ( 'tiedosto' ) ;
oli tiedosto = syöte.tiedostot;
jos ( file.length== 0 ) {
hälytys ( 'Ei tiedostoa valittuna' ) ;
palata väärä ;
}


var fileSize = Math.round ( ( tiedosto [ 0 ] .koko / 1024 ) ) ;

jos ( Tiedoston koko < = 5 * 1024 ) {
hälytys ( 'Ladattu' ) ;
} muu {
hälytys (
'Virhe! Tiedosto liian suuri' ) ;
}
}

käsikirjoitus >


Koodin ymmärtäminen:

Rungon sisällä sizeValidation() funktiolla hankimme ensin -tunnisteen ja käytämme sitten var tiedosto = inputElement.files; rivillä, jotta voimme päästä käsiksi ladattavaan tiedostoon. Sitten tarkistamme, onko tiedosto ladattu, jos ei, annamme virheilmoituksen ja poistumme funktiosta palauttamalla false.


Käytämme sitten matematiikkaa määrittääksemme tiedoston koon. Jos tiedosto on sopivan kokoinen, eli 5 Mt (tässä tapauksessa), se ladataan.


Muussa tapauksessa näyttöön tulee ponnahdusikkuna, joka sisältää virheilmoituksen.

Johtopäätös

Vaikka asiakaspuolen validointi on paljon tehokkaampaa, se ei silti korvaa palvelinpuolen validointia ja se voidaan kiertää useimmissa tapauksissa. On aina paras käytäntö toteuttaa sekä palvelin- että asiakaspuolen validointi, jotta voit varmistaa sovelluksesi tehokkuuden ja tarkkuuden.