FormData ir detalizēts ievads un lietošana https://developer.mozilla.org/zh ... ng_FormData_Objects
FormData metodes un notikumi tur jau ir ļoti skaidri, tāpēc es šeit netērēšu laiku. Šajā rakstā galvenokārt izskaidrota FormData objektu un asinhrono failu augšupielādes izmantošana.
Objekts FormData ļauj mums organizēt atslēgas un vērtības pāru kolekciju, kas nosūtīta, izmantojot objektu XMLHttpRequest. To galvenokārt izmanto veidlapu datu nosūtīšanai, bet to var izmantot neatkarīgi no datiem, kas pārsūtīti, izmantojot veidlapas.
1. FormData objekta izveide no jauna
Jūs varat izveidot savu FormData objektu un pēc tam pievienot objektam atslēgas-vērtības pārus, izmantojot addend() metodi, piemēram:
Piezīme: Gan lauki "userfile", gan "webmasterfile" satur failus. Laukam "accountnum" piešķirtais numurs tiek tieši pārvērsts virknē ar FormData.append() metodi (lauka vērtība var būt blob, fails vai virkne: ja vērtība nav ne BLOB, ne fails, vērtība tiek pārvērsta par virkni). Šajā piemērā tiek izveidota FormData instance ar laukiem "lietotājvārds", "accountnum", "userfile" un "webmasterfile" un pēc tam veidlapas datu nosūtīšanai tiek izmantota XMLHttpRequest objekta send() metode. Lauks "webmasterfile" ir blob. BLOB objekts attēlo faila objekta neapstrādātos datus. Bet datiem, ko attēlo blobs, nav jābūt javascript vietējā formātā. Failu interfeiss ir balstīts uz blobiem, pārmantojot blob funkcionalitāti un paplašinot tā atbalstu lietotāju failu sistēmām. Lai izveidotu blob, var izsaukt Blob() konstruktoru.
2. FormData objekta iegūšana no HTML veidlapas
Lai iegūtu FormData objektu, kas satur esošos veidlapas datus, veidojot FormData objektu, jānorāda veidlapas elements.
Šādi:
Pēc objekta FormData iegūšanas var pievienot arī papildu datus, piemēram:
Tas ļauj jums pievienot papildu informāciju pirms nosūtīšanas, kas nav obligāti lietotāja rediģēta.
3. Objekta FormData izmantošana faila nosūtīšanai
Failu sūtīšanai var izmantot FormData. Vienkāršā <form>vidū var <input>būt elements:
Pēc tam varat to nosūtīt ar šādu kodu:
Failu vai BLOB var pievienot arī tieši objektam FormData, šādi:
Izmantojot addend() metodi, faila nosaukuma nosūtīšanai var izmantot trešo parametru (nosūtīts uz serveri, izmantojot Content-Disposition galveni). Ja trešais parametrs nav norādīts vai šis parametrs netiek atbalstīts, trešais parametrs pēc noklusējuma ir "blob".
Ja iestatāt pareizās opcijas, varat to izmantot arī ar jQuery:
|