FormData-objektet
Opret multipart-payloads fra formularer.
FormData-objektet er en gratis JavaScript Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i JavaScript Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. JavaScript Academy-kurset indeholder 4 lektioner i alt.
Hvad er FormData?
FormData er en browser-API til at opbygge et sæt nøgle/værdi-par, der repræsenterer formularfelter og deres værdier. Det er standardmåden at pakke data, herunder filer, så de kan sendes til en server.
Den koder data som multipart/form-data, hvilket understøtter binære filoverførsler.
Oprettelse af en tom FormData
Opret en tom FormData, og tilføj felter ét ad gangen med append.
const data = new FormData();
data.append('username', 'ada');
data.append('email', 'ada@example.com');
console.log(data.get('username'));Opbygning ud fra et formelement
Giv et <form>-element til konstruktøren, så registreres alle navngivne inputfelter automatisk. Dette er den mest almindelige anvendelse.
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 tilføjer en værdi, også selvom nøglen allerede findes, så der kan være flere værdier pr. nøgle. set erstatter alle eksisterende værdier for den pågældende nøgle.
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'));Læsning af værdier
get returnerer den første værdi for en nøgle, getAll returnerer alle værdier som et array, og has kontrollerer, om nøglen findes.
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'));Sletning af felter
delete fjerner alle værdier for en nøgle. Det er nyttigt til at fjerne felter, før data sendes.
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'));Gennemløb af poster
FormData kan gennemløbes. Brug entries, keys eller values eller en for...of-løkke til at gennemgå alle par.
const data = new FormData();
data.append('a', '1');
data.append('b', '2');
for (const key of data.keys()) {
console.log('field: ' + key);
}Tilføjelse af filer
append kan tage en File eller Blob som værdi. Et valgfrit tredje argument angiver det filnavn, der 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, hvilket kan indeholde både tekstfelter og binært filindhold i den samme anmodningstekst. Derfor er det det foretrukne format til filoverførsler.
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'));Konvertering til et objekt
For enkle formularer, der kun indeholder tekst, kan Object.fromEntries omdanne FormData til et almindeligt objekt. Bemærk, at der kun bevares én værdi pr. gentaget nøgle.
const form = document.querySelector('#login');
const data = new FormData(form);
const plain = Object.fromEntries(data.entries());
console.log(plain);Hvorfor FormData er vigtigt
FormData er forbindelsesleddet mellem HTML-formularer og netværksanmodninger. Det indsamler felter og filer, understøtter gentagne nøgler og koder binære data sikkert. Nu skal du læse filindhold med FileReader og derefter sende FormData med fetch.
const form = document.querySelector('#contact');
const data = new FormData(form);
data.append('source', 'web');
console.log([...data.keys()]);Hurtig test
Hvad er forskellen på append og set på en FormData?
Opsummering: FormData-objektet
Du har lært at pakke formulardata:
new FormData(form)registrerer automatisk navngivne inputfelter.appendtillader gentagne nøgler, mensseterstatter dem.- Læs med
get,getAlloghas; gennemløb medentries. - Data kodes som multipart/form-data, der understøtter filer og binære data.
Lær JavaScript med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 59
- Lektioner
- 200
Ofte stillede spørgsmål
Er lektionen “FormData-objektet” gratis?
Ja — alle 3 lektioner i læringssporet JavaScript Academy, inklusive “FormData-objektet”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. JavaScript Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “FormData-objektet”?
Opret multipart-payloads fra formularer. Du øver dig i JavaScript Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på JavaScript Academy?
Der kræves ingen tidligere erfaring. JavaScript Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.
Hvor lang tid tager lektionen “FormData-objektet”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne JavaScript Academy-lektion?
Ja. Alle JavaScript Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.