FormData jsou podrobný úvod a použití https://developer.mozilla.org/zh ... ng_FormData_Objects
Metody a události FormData jsou tam už velmi jasné, takže se nimi zde nebudu ztrácet čas. Tento článek hlavně vysvětluje použití objektů FormData a asynchronního nahrávání souborů.
Objekt FormData nám umožňuje organizovat kolekci párů klíč-hodnota odeslaných pomocí objektu XMLHttpRequest. Primárně se používá k odesílání dat z formulářů, ale může být použit i nezávisle na datech přenášených pomocí formulářů.
1. Vytvořit objekt FormData od začátku
Můžete si vytvořit vlastní objekt FormData a pak přidat dvojice klíč-hodnota do objektu pomocí metody append(), například takto:
Poznámka: Obě pole "userfile" i "webmasterfile" obsahují soubory. Číslo přiřazené k poli "accountnum" je přímo převedeno na řetězec metodou FormData.append() (hodnota pole může být blob, soubor nebo řetězec: pokud hodnota není ani blob, ani soubor, je převedena na řetězec). Tento příklad vytváří instanci FormData s poli "username", "accountnum", "userfile" a "webmasterfile" a poté používá metodu send() objektu XMLHttpRequest k odeslání dat formuláře. Pole "webmasterfile" je bulob. Objekt blob představuje surová data souborového objektu. Ale data reprezentovaná blobem nemusí být v nativním javascriptovém formátu. Rozhraní souborů je založeno na blobech, dědí funkci blobů a rozšiřuje podporu pro uživatelské souborové systémy. Pro vytvoření blobu lze volat konstruktor Blob().
2. Získejte objekt FormData z HTML formuláře
Abychom získali objekt FormData obsahující existující data formuláře, musíte při vytváření objektu FormData specifikovat prvek formuláře.
Nějak tak:
Po získání objektu FormData můžete také přidat další data, například takto:
To vám umožní přidat další informace před odesláním, které nemusí být nutně upraveny uživatelem.
3. Použijte objekt FormData k odeslání souboru
Formuláře můžete použít k odesílání souborů. <form>Jednoduchý prostředek může <input>obsahovat prvek:
Poté můžete použít následující kód k odeslání:
Můžete také přidat soubor nebo blob přímo do objektu FormData, například takto:
Při použití metody append() může být použit třetí parametr k odeslání názvu souboru (zaslaného serveru přes hlavičku Content-Disposition). Pokud třetí parametr není specifikován nebo není podporován, třetí parametr se automaticky nastaví na "blob".
Pokud nastavíte správné možnosti, můžete to také použít s jQuery:
|