FormData to szczegółowe wprowadzenie i użycie https://developer.mozilla.org/zh ... ng_FormData_Objects
Metody i wydarzenia FormData są tam już bardzo jasne, więc nie będę tracił na nie czasu. Ten artykuł głównie wyjaśnia użycie obiektów FormData oraz asynchronicznego przesyłania plików.
Obiekt FormData pozwala nam organizować kolekcję par klucz-wartość wysyłanych za pomocą obiektu XMLHttpRequest. Jest głównie używany do przesyłania danych formularzy, ale może być używany niezależnie od danych przesyłanych za pomocą formularzy.
1. Utworzenie obiektu FormData od podstaw
Możesz stworzyć własny obiekt FormData, a następnie dodać do obiektu pary klucz-wartość za pomocą metody append(), na przykład tak:
Uwaga: Zarówno pola "userfile", jak i "webmasterfile" zawierają pliki. Liczba przypisana polu "accountnum" jest bezpośrednio przekształcana w ciąg za pomocą metody FormData.append() (wartość pola może być blobem, plikiem lub ciągiem tekstowym: jeśli wartość nie jest ani blobem, ani plikiem, jest konwertowana na ciąg znaków).
2. Pobierz obiekt FormData z formularza HTML
Aby uzyskać obiekt FormData zawierający istniejące dane formularza, musisz określić element formularza podczas tworzenia obiektu FormData.
Jak to:
Możesz też dodać dodatkowe dane po otrzymaniu obiektu FormData, na przykład tak:
Pozwala to dodać dodatkowe informacje przed wysłaniem, niekoniecznie edytowane przez użytkownika.
3. Użyj obiektu FormData, aby wysłać plik
Możesz użyć FormData do wysyłania plików. <form>Prosty środek może <input>zawierać element:
Następnie możesz użyć następującego kodu, aby go wysłać:
Możesz też dodać plik lub blob bezpośrednio do obiektu FormData, na przykład tak:
Przy użyciu metody append() można użyć trzeciego parametru do wysłania nazwy pliku (wysyłanej do serwera przez nagłówek Content-Disposition). Jeśli trzeci parametr nie jest określony lub nie jest obsługiwany, trzeci parametr domyślnie przyjmuje "blob".
Jeśli ustawisz odpowiednie opcje, możesz też używać go z jQuery:
|
Opublikowano 08.05.2018 16:30:39
|
|
|
