FormData-objektet
Bygg multipart-payloads från formulär.
FormData-objektet är en gratis lektion i JavaScript Academy på CoddyKit. Detta är lektion 1 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för JavaScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i JavaScript Academy innehåller totalt 4 lektioner.
Vad är FormData?
FormData är ett webbläsar-API för att skapa en uppsättning nyckel/värde-par som representerar formulärfält och deras värden. Det är standardsättet att paketera data, inklusive filer, för att skicka dem till en server.
Det kodas som multipart/form-data, vilket stöder binära uppladdningar.
Skapa ett tomt FormData-objekt
Skapa ett tomt FormData-objekt och lägg till fält ett i taget med append.
const data = new FormData();
data.append('username', 'ada');
data.append('email', 'ada@example.com');
console.log(data.get('username'));Skapa från ett formulärelement
Skicka ett <form>-element till konstruktorn, så samlas alla namngivna inmatningsfält in automatiskt. Detta är det vanligaste användningsområdet.
const form = document.querySelector('#signup');
const data = new FormData(form);
for (const [key, value] of data.entries()) {
console.log(key, value);
}append jämfört med set
append lägger till ett värde även om nyckeln redan finns, vilket gör det möjligt att ha flera värden per nyckel. set ersätter alla befintliga värden för nyckeln.
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äsa värden
get returnerar det första värdet för en nyckel, getAll returnerar alla värden som en array och has kontrollerar om nyckeln finns.
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'));Ta bort fält
delete tar bort alla värden för en nyckel. Det är praktiskt för att ta bort fält innan data skickas.
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'));Iterera över poster
FormData är itererbart. Använd entries, keys eller values, eller en for...of-loop, för att gå igenom alla par.
const data = new FormData();
data.append('a', '1');
data.append('b', '2');
for (const key of data.keys()) {
console.log('field: ' + key);
}Lägga till filer
append kan ta emot en File eller Blob som värde. Ett valfritt tredje argument anger filnamnet som skickas till servern.
const fileInput = document.querySelector('#avatar');
const data = new FormData();
data.append('avatar', fileInput.files[0], 'profile.png');
console.log(data.get('avatar').name);Varför multipart/form-data
FormData serialiseras som multipart/form-data, vilket kan innehålla både textfält och binärt filinnehåll i samma request body. Därför är det det självklara formatet för filuppladdningar.
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'));Konvertera till ett objekt
För enkla formulär som bara innehåller text kan Object.fromEntries omvandla FormData till ett vanligt objekt. Observera att endast ett värde per upprepad nyckel behålls.
const form = document.querySelector('#login');
const data = new FormData(form);
const plain = Object.fromEntries(data.entries());
console.log(plain);Varför FormData är viktigt
FormData är länken mellan HTML-formulär och nätverksanrop. Det samlar in fält och filer, stöder upprepade nycklar och kodar binärdata på ett säkert sätt. Sedan kommer ni att läsa filinnehåll med FileReader och därefter skicka FormData med fetch.
const form = document.querySelector('#contact');
const data = new FormData(form);
data.append('source', 'web');
console.log([...data.keys()]);Snabb kontroll
Vad är skillnaden mellan append och set i FormData?
Sammanfattning: FormData-objektet
Ni har lärt er att paketera formulärdata:
new FormData(form)samlar automatiskt in namngivna inmatningsfält.appendtillåter upprepade nycklar;setersätter dem.- Läs med
get,getAllochhas; iterera medentries. - Det kodas som multipart/form-data, vilket stöder filer och binärdata.
Lär dig JavaScript med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 59
- Lektioner
- 200
Vanliga frågor
Är lektionen ”FormData-objektet” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen JavaScript Academy, inklusive ”FormData-objektet”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i JavaScript Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”FormData-objektet”?
Bygg multipart-payloads från formulär. Ni övar på JavaScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig JavaScript Academy?
Du behöver inga förkunskaper. Utbildningen i JavaScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.
Hur lång tid tar lektionen ”FormData-objektet”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här JavaScript Academy-lektionen?
Ja. Varje JavaScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.