Validierung der Dateigröße beim Hochladen mit JavaScript / JQuery

Validierung der Dateigröße beim Hochladen mit JavaScript / JQuery

Die Datenvalidierung ist ein wesentlicher Bestandteil jeder Webanwendung, da sie sicherstellen. Daten können sowohl auf der Server als auch auf der Client-Seite validiert werden, aber die clientseitige Validierung spart häufig die Zeit der Benutzer und erweist sich als schöner und glatterer Benutzererfahrung. Die clientseitige Datenvalidierung kann problemlos durchgeführt werden und verbraucht viel weniger Zeit.

In dieser Anleitung werden wir mithilfe von HTML, JavaScript/JQuery das Erstellen eines Formulars mithilfe von HTML, das die Datei der Größe überprüft. Der Vorteil dieser Validierung besteht darin, dass wir Benutzer dazu beschränken können, nur eine bestimmte Größe von Dateien hochzuladen und sicherzustellen, dass sie unseren Anforderungen strikt erfüllen. Wenn die Datei die falsche Größe hat, können wir eine Nachricht an den Benutzer auffordern, ohne die Datei auf den Server hochzuladen, der kostbare Zeit spart.

Webseite erstellen

Zunächst erstellen wir eine einfache HTML -Webseite:




<br>Validierung der Dateigröße beim Hochladen mit JavaScript / JQuery<br>


Eine Datei hochladen










Den Code verstehen:

Im Körper der Webseite haben wir einfach a verwendet

, ,
und ein Schild. Der Das Tag wird verwendet, damit der Benutzer eine Datei auswählen und anschließend mit der Schaltfläche mit dem mit der angezeigten Schaltfläche hochladen kann Schild.

Der Tag ruft die sizevalidation () Funktion beim Klicken Sie auf Ereignis, das dann die Größe der Datei bestimmt und je nach Größe der Datei einen geeigneten Alarm druckt.

Definieren Sie JavaScript sizevalidation () -Funktion

Schreiben wir nun den JavaScript -Code, der das definiert sizevalidation () Funktion.


Den Code verstehen:

Im Körper des Körpers sizevalidation () Funktion Wir erhalten zuerst das Tag und verwenden dann das var file = inputElement.Dateien; Zeile, damit wir Zugriff auf die hochgeladene Datei erhalten können. Anschließend überprüfen wir, ob eine Datei hochgeladen wurde, wenn nicht, werden wir eine Fehlermeldung fordern und aus der Funktion herauskommen, indem wir false zurückgeben.


Wir verwenden dann einige Mathematik, um die Größe der Datei zu bestimmen. Wenn die Datei von entsprechender Größe i ist.e., 5 MB (in diesem Fall) wird es hochgeladen.


Andernfalls wird ein Popup mit einer Fehlermeldung angezeigt.

Abschluss

Auch wenn die clientseitige Validierung viel effizienter ist, ist sie immer noch kein Ersatz für die serverseitige Validierung und kann in den meisten Fällen umgangen werden. Es ist immer eine bewährte Verfahren, sowohl die Server- als auch die clientseitige Validierung zu implementieren, damit Sie sowohl die Effizienz als auch die Genauigkeit Ihrer Anwendung sicherstellen können.