Die Datenvalidierung ist ein wesentlicher Bestandteil jeder Webanwendung, da sie dazu beiträgt sicherzustellen, dass die hochgeladenen Daten bestimmten Anforderungen der Entwickler entsprechen. Daten können sowohl server- als auch clientseitig validiert werden, aber die clientseitige Validierung spart den Benutzern oft Zeit und sorgt für eine angenehmere, reibungslosere Benutzererfahrung. Die clientseitige Datenvalidierung kann einfach durchgeführt werden und verbraucht viel weniger Zeit.
In dieser Anleitung gehen wir durch den Prozess der Erstellung eines Formulars mit HTML, JavaScript/jQuery, das die Größe der Datei beim Hochladen validiert. Der Vorteil dieser Validierung besteht darin, dass wir Benutzer darauf beschränken können, nur eine bestimmte Dateigröße hochzuladen, und sicherstellen können, dass sie unsere Anforderungen strikt einhalten. Wenn die Datei die falsche Größe hat, können wir eine Nachricht an den Benutzer senden, ohne die Datei auf den Server hochzuladen, was wertvolle Zeit spart.
Webseite erstellen
Zuerst erstellen wir eine einfache HTML-Webseite:
DOCTYPE html >
< html >
< Kopf >
< Titel >
Validierung von Datei Größe während Hochladen mit JavaScript / jQuery
Titel >
Kopf >
< Karosserie Stil = 'Polsterung oben: 10 Pixel; Textausrichtung: Mitte;' >
< p > Hochladen a Datei p >
< Eingang Ich würde = 'Datei' Typ = 'Datei' Stil = 'Padding-Links: 95px;' />
< Br >< Br >
< Taste anklicken = 'sizeValidation()' > Hochladen Taste >
Karosserie >
html >
Code verstehen:
Im Hauptteil der Webseite haben wir einfach a verwendet ,
und ein
Das
Definieren Sie die Funktion sizeValidation() in JavaScript
Lassen Sie uns nun den JavaScript-Code schreiben, der die definiert sizeValidation() Funktion.
< Skript >
Funktion Größenvalidierung ( ) {
var input = document.getElementById ( 'Datei' ) ;
war Datei = input.files;
wenn ( file.length== 0 ) {
Alarm ( 'Keine Datei ausgewählt' ) ;
Rückkehr FALSCH ;
}
var fileSize = Math.round ( ( Datei [ 0 ] .Größe / 1024 ) ) ;
wenn ( Dateigröße < = 5 * 1024 ) {
Alarm ( 'Hochgeladen' ) ;
} anders {
Alarm (
'Fehler! Datei zu groß' ) ;
}
}
Skript >
Code verstehen:
Im Inneren des Körpers der sizeValidation() Funktion erhalten wir zuerst das Tag und verwenden dann die var file = inputElement.files; Zeile, damit wir Zugriff auf die hochgeladene Datei erhalten können. Dann prüfen wir, ob eine Datei hochgeladen wurde, wenn nicht, geben wir eine Fehlermeldung aus und verlassen die Funktion, indem wir false zurückgeben.
Wir verwenden dann etwas Mathematik, um die Größe der Datei zu bestimmen. Wenn die Datei eine angemessene Größe hat, d. h. 5 MB (in diesem Fall), wird sie hochgeladen.
Andernfalls wird ein Popup mit einer Fehlermeldung angezeigt.
Fazit
Obwohl die clientseitige Validierung viel effizienter ist, ist sie dennoch kein Ersatz für die serverseitige Validierung und kann in den meisten Fällen umgangen werden. Es ist immer eine bewährte Methode, sowohl eine server- als auch eine clientseitige Validierung zu implementieren, damit Sie sowohl die Effizienz als auch die Genauigkeit Ihrer Anwendung sicherstellen können.