FormData-objektet
Bygg multipart-nyttelaster fra skjemaer.
FormData-objektet er en gratis leksjon i JavaScript Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i JavaScript Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.
Hva er FormData?
FormData er et nettleser-API for å bygge et sett med nøkkel/verdi-par som representerer skjemafelt og verdiene deres. Det er standardmåten å pakke inn data, inkludert filer, for sending til en server.
Det kodes som multipart/form-data, som støtter binære opplastinger.
Opprette en tom FormData
Opprett en tom FormData, og legg til felt ett om gangen med append.
const data = new FormData();
data.append('username', 'ada');
data.append('email', 'ada@example.com');
console.log(data.get('username'));Bygge fra et skjemaelement
Send et <form>-element til konstruktøren, så blir alle navngitte inndatafelt automatisk tatt med. Dette er den vanligste bruken.
const form = document.querySelector('#signup');
const data = new FormData(form);
for (const [key, value] of data.entries()) {
console.log(key, value);
}append kontra set
append legger til en verdi selv om nøkkelen allerede finnes, slik at hver nøkkel kan ha flere verdier. set erstatter alle eksisterende verdier for nøkkelen.
const data = new FormData();
data.append('tag', 'a');
data.append('tag', 'b');
console.log(data.getAll('tag'));
data.set('tag', 'only');
console.log(data.getAll('tag'));Lese verdier
get returnerer den første verdien for en nøkkel, getAll returnerer alle verdiene som en array, og has kontrollerer om nøkkelen finnes.
const data = new FormData();
data.append('color', 'red');
data.append('color', 'blue');
console.log(data.get('color'));
console.log(data.getAll('color'));
console.log(data.has('color'));Slette felt
delete fjerner alle verdier for en nøkkel. Dette er nyttig for å fjerne felt før sending.
const data = new FormData();
data.append('keep', '1');
data.append('remove', '2');
data.delete('remove');
console.log(data.has('remove'));
console.log(data.has('keep'));Gå gjennom oppføringer
FormData kan itereres over. Bruk entries, keys eller values, eller en for...of-løkke, for å gå gjennom alle parene.
const data = new FormData();
data.append('a', '1');
data.append('b', '2');
for (const key of data.keys()) {
console.log('field: ' + key);
}Legge til filer
append kan ta en File eller Blob som verdi. Et valgfritt tredje argument angir filnavnet som sendes til serveren.
const fileInput = document.querySelector('#avatar');
const data = new FormData();
data.append('avatar', fileInput.files[0], 'profile.png');
console.log(data.get('avatar').name);Hvorfor multipart/form-data
FormData serialiseres som multipart/form-data, som kan inneholde både tekstfelt og binært filinnhold i samme forespørselsbody. Derfor er dette det foretrukne formatet for filopplastinger.
const data = new FormData();
data.append('title', 'Vacation Photo');
data.append('photo', new Blob(['binary'], { type: 'image/png' }), 'pic.png');
console.log(data.has('photo'));Konvertere til et objekt
For enkle skjemaer som bare inneholder tekst kan Object.fromEntries konvertere FormData til et vanlig objekt. Vær oppmerksom på at dette bare beholder én verdi per nøkkel som gjentas.
const form = document.querySelector('#login');
const data = new FormData(form);
const plain = Object.fromEntries(data.entries());
console.log(plain);Hvorfor FormData er viktig
FormData er bindeleddet mellom HTML-skjemaer og nettverksforespørsler. Det samler inn felt og filer, støtter gjentatte nøkler og koder binærdata på en trygg måte. Deretter skal du lese filinnhold med FileReader og sende FormData med fetch.
const form = document.querySelector('#contact');
const data = new FormData(form);
data.append('source', 'web');
console.log([...data.keys()]);Kontrollspørsmål
Hva er forskjellen mellom append og set på en FormData?
Oppsummering: FormData-objektet
Du har lært å pakke inn skjemadata:
new FormData(form)tar automatisk med navngitte inndatafelt.appendtillater gjentatte nøkler, mensseterstatter dem.- Les med
get,getAlloghas, og iterer medentries. - Dataene kodes som multipart/form-data, som støtter filer og binærdata.
Lær deg JavaScript med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 59
- Leksjoner
- 200
Ofte stilte spørsmål
Er leksjonen «FormData-objektet» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien JavaScript Academy, inkludert «FormData-objektet», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «FormData-objektet»?
Bygg multipart-nyttelaster fra skjemaer. Du øver på JavaScript Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med JavaScript Academy?
Ingen tidligere erfaring er nødvendig. JavaScript Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.
Hvor lang tid tar leksjonen «FormData-objektet»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne JavaScript Academy-leksjonen?
Ja. Alle JavaScript Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.