React Academy · Lektion

Filindata och läsa fildata

Hantera , läs filmetadata och förhandsvisa bilder med FileReader.

Lektion 2 av 413 steg

Filindata och läsa fildata är en gratis lektion i React Academy på CoddyKit. Detta är lektion 2 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för React Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Academy innehåller totalt 4 lektioner.

Välkommen

I den här lektionen hanterar ni filinmatningsfält i React, läser filmetadata, förhandsvisar valda bilder och använder FileReader API för att bearbeta filinnehåll.

Filinmatningselementet

Elementet `` kan inte kontrolleras av Reacts value-prop — det är alltid okontrollerat. Läs den valda filen från `e.target.files[0]` i onChange-hanteraren.

function FileInput() {
  const handleChange = (e) => {
    const file = e.target.files[0];
    console.log(file.name, file.size, file.type);
  };
  return <input type="file" onChange={handleChange} />;
}

Egenskaper hos File-objekt

Ett File-objekt utökar Blob och har: `name` (filnamn), `size` (byte), `type` (MIME-typ, till exempel 'image/png') och `lastModified` (tidsstämpel). Läs dessa innan ni laddar upp eller bearbetar filen.

Acceptera specifika filtyper

Använd attributet `accept` för att ange för webbläsaren vilka filtyper som ska visas. Kombinera MIME-typer och filändelser. Validera alltid även på serversidan.

<input type="file" accept="image/png,image/jpeg,.pdf" />

Välja flera filer

Lägg till attributet `multiple` för att tillåta val av flera filer. `e.target.files` returnerar en FileList — konvertera den till en array med `Array.from()` för att kunna använda arraymetoder.

<input type="file" multiple />

const files = Array.from(e.target.files);

Förhandsvisa en bild med URL.createObjectURL

Skapa en tillfällig URL för förhandsvisning av en vald bildfil med `URL.createObjectURL(file)`. Kom ihåg att återkalla den med `URL.revokeObjectURL` när ni är klara för att frigöra minne.

const [preview, setPreview] = useState(null);

const handleChange = (e) => {
  const file = e.target.files[0];
  if (file) setPreview(URL.createObjectURL(file));
};

useEffect(() => {
  return () => { if (preview) URL.revokeObjectURL(preview); };
}, [preview]);

{preview && <img src={preview} alt="Preview" />}

Läs filinnehåll med FileReader

Använd `FileReader` API för att läsa filens innehåll som text eller en data-URL. Anropa `reader.readAsText(file)` för textfiler eller `reader.readAsDataURL(file)` för binära filer som bilder.

const reader = new FileReader();
reader.onload = (e) => setContent(e.target.result);
reader.readAsText(file);

Validera filstorlek

Validera filstorleken på klienten innan uppladdning. Avvisa filer som är större än en angiven gräns och visa ett felmeddelande.

const MAX_SIZE = 5 * 1024 * 1024; // 5 MB
if (file.size > MAX_SIZE) {
  setError('File must be under 5 MB');
  return;
}

Rensa filinmatningsfältet

Ni kan inte rensa ett filinmatningsfält genom att ange dess value, eftersom det är skrivskyddat. Återställ det i stället imperativt via en ref eller genom att ändra inmatningsfältets `key`-prop för att tvinga fram en ommontering.

const inputRef = useRef();
const clear = () => { inputRef.current.value = ''; };
<input ref={inputRef} type="file" />

Lagra filreferenser i state

Lagra själva File-objektet i state (inte bara namnet eller URL:en). Då kan ni ladda upp filen senare utan att läsa den från DOM:en igen.

const [file, setFile] = useState(null);
const handleChange = (e) => setFile(e.target.files[0] || null);

Snabb kontroll

Vilken metod skapar en tillfällig URL för att förhandsvisa en vald bildfil i webbläsaren?

Besvara frågan i den interaktiva lektionen

Sammanfattning

Läs valda filer från e.target.files. Använd URL.createObjectURL för förhandsvisningar, FileReader för att läsa innehåll, validera storleken på klienten och lagra File-objektet i state för senare uppladdning.

Nästa

Nästa lektion: **Gränssnitt för dra och släpp av filer** — ni kommer att bygga en dra-och-släpp-zon med visuell återkoppling med hjälp av React-händelser.

Gratis att börja

Lär dig React 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: 88
Lektioner: 324

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Filindata och läsa fildata” gratis?

Ja – hela texten till ”Filindata och läsa fildata” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i React Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i React Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Filindata och läsa fildata”?

Hantera , läs filmetadata och förhandsvisa bilder med FileReader. Ni övar på React 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 React Academy?

Du behöver inga förkunskaper. Utbildningen i React 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 2 av 4.

Hur lång tid tar lektionen ”Filindata och läsa fildata”?

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 React Academy-lektionen?

Ja. Varje React 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.

Alla lektioner i den här kursen

Okontrollerade indatafält med useRef
Filindata och läsa fildata
Gränssnitt för filuppladdning med dra och släpp
Ladda upp filer till ett backend-API

← Tillbaka till React Academy