HTML5 - Prześlij pliki

Kiedy mamy formularze do zbierania danych na jednej stronie HTML5 Oprócz możliwości pobierania danych z polami typu input, możemy również przesyłać pliki, dzięki czemu możemy przyspieszyć ładowanie niektórych danych, których nie można wyrazić w tekście lub które mogą być bardzo długimi tekstami, zwyczajowo przesyła się obraz pliki lub pliki pdf , ponieważ te dwa formaty są bardzo popularne, jednak z Ajaks możemy przesłać prawie każdy typ pliku.
Prześlij pliki
W celu przesyłanie plików za pomocą Ajax, musimy utworzyć pole typu pliku w formularzu i w naszej procedurze Ajaks użyć przedmiotu Tworzyć dane za pomocą którego będziemy zbierać dane, aby móc nadać im niezbędny format i przesłać nasz plik na serwer.
Obiekt Tworzyć dane należy go używać ostrożnie, ponieważ nadal mogą istnieć wersje przeglądarek, które nie w pełni go obsługują, jednak jest to dość solidne rozwiązanie.
Zobaczmy w poniższym kodzie, jak wykonać podstawowe przesyłanie plików:

 PrzykładBanany:Jabłka:Wiśnie:Plik:Całkowity:0 pozycjiPrześlij formularz 

Podczas włączania danych wejściowych typu pliku, obiekt Tworzyć dane automatycznie dokonuje ustaleń, aby nasz plik mógł zostać wgrany na serwer, na poniższym obrazku widzimy, jak przeglądarka to interpretuje:

W tym przypadku był to dość jasny obraz, więc czas wgrania pliku na serwer nie jest zauważalny, jednak gdyby był to 30 MB pdf czas byłby znacznie dłuższy, ponieważ jest to dla użytkownika przejrzyste, mógłby pomyśleć, że strona nie „robi nic” lub „myśli”, aby tego uniknąć, możemy włączyć pasek postępu, dzięki któremu postęp staje się widoczny.
Aby zobaczyć postępy wspinaczki, użyjemy obiektu Żądanie XMLHttp aby zweryfikować status wniosku Ajaks:

 PrzykładBanany:Jabłka:Wiśnie:Plik:Postęp:Całkowity:0 pozycjiPrześlij formularz 

Zdefiniowaliśmy element postęp i z nim Obiekt XMLHttpRequest Wartości możemy przypisywać w trakcie przesyłania, w przeglądarce widzimy to w następujący sposób:

POWIĘKSZAĆ

Możemy użyć Ajaks O wiele więcej niż konsultowanie elementów na innych stronach, możemy również wykorzystać go do ulepszenia naszych formularzy, jeśli chodzi o przechwytywanie danych.Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt