Walidacja rozmiaru pliku podczas przesyłania za pomocą JavaScript / JQuery

Walidacja rozmiaru pliku podczas przesyłania za pomocą JavaScript / JQuery

Walidacja danych jest istotną częścią każdej aplikacji internetowej, ponieważ pomaga zapewnić, że przesyłanie danych pasują do niektórych wymagań nałożonych przez programistów. Dane mogą być sprawdzane zarówno po stronie serwera, jak i klienta, ale walidacja po stronie klienta często zapisuje czas użytkowników i okazuje się ładniejszym, płynniejszym doświadczeniem użytkownika. Walidacja danych po stronie klienta można wykonać łatwo i zużywa znacznie mniej czasu.

W tym przewodniku instruktażowym przejdziemy przez proces tworzenia formularza za pomocą HTML, JavaScript/JQuery, który sprawdza plik rozmiaru podczas przesyłania. Zaletą tej walidacji jest to, że możemy ograniczyć użytkowników do przesłania tylko określonego rozmiaru plików i upewnienia się, że ściśle przestrzegają naszych wymagań. Jeśli plik ma niewłaściwy rozmiar, możemy monitować wiadomość do użytkownika bez przesyłania pliku na serwer, który zapisuje cenny czas.

Utwórz stronę internetową

Najpierw stworzymy prostą stronę internetową HTML:




<br>Walidacja rozmiaru pliku podczas przesyłania za pomocą JavaScript / JQuery<br>


Prześlij plik










Zrozumienie kodu:

Na ciele strony internetowej po prostu użyliśmy

, ,
i a etykietka. Tag jest używany, aby użytkownik mógł wybrać plik, a następnie przesłać go za pomocą przycisku wyświetlanego za pomocą za pomocą etykietka.

tag woła sizeValidation () Funkcja przy zdarzeniu kliknięcia, która następnie określa rozmiar pliku i drukuje odpowiedni alert w zależności od rozmiaru pliku.

Zdefiniuj funkcję JavaScript sizeValidation ()

Teraz napiszmy kod JavaScript, który definiuje sizeValidation () funkcjonować.


Zrozumienie kodu:

Wewnątrz ciała sizeValidation () Funkcja Najpierw otrzymujemy znacznik, a następnie używamy var file = wejście.akta; linia, abyśmy mogli uzyskać dostęp do przesyłania pliku. Następnie sprawdzamy, czy plik został przesłany, jeśli nie, wyświetlimy monitowanie komunikatu o błędzie i wyjdziemy z funkcji, zwracając false.


Następnie używamy matematyki do określenia rozmiaru pliku. Jeśli plik ma odpowiedni rozmiar i.mi., 5 MB (w tym przypadku) jest przesłany.


W przeciwnym razie wyświetlane jest wyskakujące okienko zawierające komunikat o błędzie.

Wniosek

Mimo że walidacja po stronie klienta jest znacznie bardziej wydajna, nadal nie jest substytutem sprawdzania poprawności serwera i w większości przypadków może być omijana. Wdrożenie zarówno walidacji serwera, jak i klienta jest zawsze najlepszą praktyką, aby zapewnić zarówno wydajność, jak i dokładność aplikacji.