Sprawdzanie poprawności danych jest istotną częścią każdej aplikacji internetowej, ponieważ pomaga upewnić się, że przesyłane dane spełniają określone wymagania nałożone przez programistów. Dane mogą być weryfikowane zarówno po stronie serwera, jak i klienta, ale weryfikacja po stronie klienta często oszczędza czas użytkowników i okazuje się przyjemniejsza i bardziej płynna. Sprawdzanie poprawności danych po stronie klienta można przeprowadzić łatwo i zajmuje znacznie mniej czasu.
W tym poradniku omówimy proces tworzenia formularza za pomocą HTML, JavaScript/jQuery, który sprawdza poprawność rozmiaru pliku podczas przesyłania. Zaletą tej weryfikacji jest to, że możemy ograniczyć użytkownikom przesyłanie plików o określonym rozmiarze i upewnić się, że ściśle przestrzegają naszych wymagań. Jeśli plik ma niewłaściwy rozmiar, możemy podpowiedzieć użytkownikowi wiadomość bez wgrywania pliku na serwer, co pozwala zaoszczędzić cenny czas.
Utwórz stronę internetową
Najpierw stworzymy prostą stronę HTML:
DOCTYPE html >
< html >
< głowa >
< tytuł >
Walidacja plik rozmiar podczas gdy przesyłanie za pomocą JavaScript / jQuery
tytuł >
głowa >
< ciało styl = 'padding-top: 10px; text-align:center;' >
< p > Prześlij plik p >
< Wejście ID = 'plik' rodzaj = 'plik' styl = 'dopełnienie-lewo: 95px;' />
< br >< br >
< przycisk na kliknięcie = 'Walidacja rozmiaru()' > Wgrywać przycisk >
ciało >
html >
Zrozumienie Kodeksu:
W treści strony użyliśmy po prostu a ,
i
The
Zdefiniuj JavaScript sizeValidation() Function
Teraz napiszmy kod JavaScript, który definiuje Walidacja rozmiaru() funkcjonować.
< scenariusz >
funkcjonować sizeValidation ( ) {
var input = document.getElementById ( 'plik' ) ;
był plik = input.files;
jeśli ( file.length== 0 ) {
alarm ( 'Nie wybrano żadnego pliku' ) ;
zwrócić fałszywy ;
}
var fileSize = Math.round ( ( plik [ 0 ] .rozmiar / 1024 ) ) ;
jeśli ( rozmiar pliku < = 5 * 1024 ) {
alarm ( 'Załadowany' ) ;
} w przeciwnym razie {
alarm (
'Błąd! Plik jest za duży' ) ;
}
}
scenariusz >
Zrozumienie Kodeksu:
Wewnątrz ciała Walidacja rozmiaru() funkcji najpierw otrzymujemy tag a następnie używamy plik var = inputElement.files; wiersz, abyśmy mogli uzyskać dostęp do przesyłanego pliku. Następnie sprawdzamy, czy plik został wgrany, jeśli nie, wyświetlimy komunikat o błędzie i wyjdziemy z funkcji zwracając false.
Następnie korzystamy z matematyki, aby określić rozmiar pliku. Jeśli plik ma odpowiedni rozmiar, tj. 5 MB (w tym przypadku), zostanie przesłany.
W przeciwnym razie zostanie wyświetlone wyskakujące okienko zawierające komunikat o błędzie.
Wniosek
Mimo że walidacja po stronie klienta jest znacznie bardziej wydajna, nadal nie zastępuje walidacji po stronie serwera i w większości przypadków można ją obejść. Zawsze najlepszym rozwiązaniem jest zaimplementowanie walidacji zarówno po stronie serwera, jak i po stronie klienta, aby zapewnić zarówno wydajność, jak i dokładność aplikacji.