FormData je podrobný úvod a použitie https://developer.mozilla.org/zh ... ng_FormData_Objects
Metódy a udalosti FormData sú tam už veľmi jasné, takže tu nebudem strácať čas. Tento článok hlavne vysvetľuje použitie objektov FormData a asynchrónne nahrávanie súborov.
Objekt FormData nám umožňuje organizovať kolekciu párov kľúč-hodnota odoslaných pomocou objektu XMLHttpRequest. Primárne sa používa na odosielanie údajov z formulárov, ale môže byť použitý nezávisle od údajov prenášaných pomocou formulárov.
1. Vytvoriť objekt FormData od nuly
Môžete vytvoriť vlastný objekt FormData a potom pridať páry kľúč-hodnota do objektu pomocou metódy append(), napríklad takto:
Poznámka: Polia "userfile" aj "webmasterfile" obsahujú súbory. Číslo priradené poliu "accountnum" sa priamo konvertuje na reťazec metódou FormData.append() (hodnota poľa môže byť blob, súbor alebo reťazec: ak hodnota nie je ani blob, ani súbor, hodnota sa konvertuje na reťazec). Tento príklad vytvorí inštanciu FormData s poliami "username", "accountnum", "userfile" a "webmasterfile" a potom použije metódu send() objektu XMLHttpRequest na odoslanie údajov formulára. Pole "webmasterfile" je škvrna. Objekt blob reprezentuje surové dáta súborového objektu. Ale dáta reprezentované blobom nemusia byť natívne v javascriptovom formáte. Rozhranie súborov je založené na bloboch, dediac funkcionalitu blobov a rozširujúc podporu pre používateľské súborové systémy. Na vytvorenie blobu je možné zavolať konštruktor Blob().
2. Získajte objekt FormData z HTML formulára
Aby ste získali objekt FormData obsahujúci existujúce údaje formulára, musíte pri vytváraní objektu FormData špecifikovať tento prvok.
Ako toto:
Po získaní objektu FormData môžete tiež pridať ďalšie dáta, napríklad takto:
To vám umožní pridať ďalšie informácie pred odoslaním, nie nevyhnutne upravené používateľom.
3. Použite objekt FormData na odoslanie súboru
Na odosielanie súborov môžete použiť FormData. <form>Jednoduchý stred môže <input>obsahovať prvok:
Potom môžete použiť nasledujúci kód na odoslanie:
Môžete tiež pridať súbor alebo blob priamo do objektu FormData, napríklad takto:
Pri použití metódy append() môže byť použitý tretí parameter na odoslanie názvu súboru (odoslaného serveru cez hlavičku Content-Disposition). Ak tretí parameter nie je špecifikovaný alebo tento parameter nie je podporovaný, tretí parameter sa predvolene nastaví na "blob".
Ak nastavíte správne možnosti, môžete ho použiť aj s jQuery:
|