JavaScript Academy · Ders

FileReader ile Dosya Okuma

Seçilen dosyaları metin veya veri URL'leri olarak okuyun.

FileReader ile Dosya Okuma, CoddyKit'te ücretsiz bir JavaScript Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, JavaScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. JavaScript Academy kursu toplamda 4 dersten oluşur.

FileReader Nedir?

FileReader, File ve Blob nesnelerinin içeriklerini eşzamansız olarak okuyan bir tarayıcı API'sidir. Bir dosyayı <input type="file"> öğesinden alıp metne, veri URL'sine veya ikili veriye okuyabilirsiniz.

Girişten Dosya Alma

Dosya girişi bir files listesi sunar. Seçilen ilk dosya 0 dizinindedir; name, size ve type gibi kullanışlı özelliklere sahiptir.

const input = document.querySelector('#picker');
const file = input.files[0];

console.log(file.name);
console.log(file.size);
console.log(file.type);

Okuma Eşzamansızdır

FileReader verileri doğrudan döndürmez. Bir onload işleyicisi ekledikten sonra bir okuma yöntemi çağırırsınız. Sonuç daha sonra reader.result içinde kullanılabilir.

const reader = new FileReader();
reader.onload = function () {
  console.log('done reading');
  console.log(reader.result);
};
reader.readAsText(file);

readAsText

readAsText, dosyanın kodunu bir metin dizesi olarak çözer; .txt, .csv veya JSON dosyaları için idealdir.

const reader = new FileReader();
reader.onload = () => {
  console.log('contents:', reader.result);
};
reader.readAsText(textFile);

readAsDataURL

readAsDataURL, 64 tabanlı bir data: URL'si üretir. Bir görüntüyü img.src özelliğine atayarak önizlemek için idealdir.

const reader = new FileReader();
reader.onload = () => {
  const img = document.querySelector('#preview');
  img.src = reader.result;
  console.log(reader.result.slice(0, 30));
};
reader.readAsDataURL(imageFile);

readAsArrayBuffer

readAsArrayBuffer, ham ikili verileri bir ArrayBuffer olarak sağlar; dosya biçimlerini bayt bayt ayrıştırmak için kullanışlıdır.

const reader = new FileReader();
reader.onload = () => {
  const bytes = new Uint8Array(reader.result);
  console.log('byte count:', bytes.length);
  console.log('first byte:', bytes[0]);
};
reader.readAsArrayBuffer(binaryFile);

Hataları Yönetme

Okuma başarısızlıklarını yakalamak için bir onerror işleyicisi ekleyin; örneğin dosya okunamıyorsa bunu kullanabilirsiniz.

const reader = new FileReader();
reader.onerror = () => {
  console.log('read failed:', reader.error.name);
};
reader.onload = () => console.log('ok');
reader.readAsText(file);

İlerlemeyi İzleme

Büyük dosyalarda onprogress olayı, şimdiye kadar kaç baytın yüklendiğini bildirir; bu bilgi ilerleme çubukları için kullanışlıdır.

const reader = new FileReader();
reader.onprogress = (event) => {
  if (event.lengthComputable) {
    const percent = (event.loaded / event.total) * 100;
    console.log('loaded ' + percent.toFixed(0) + '%');
  }
};
reader.readAsArrayBuffer(bigFile);

Bir Promise İçine Sarma

Olay tabanlı API kullanışsızdır. Daha temiz bir kod için bunu bir Promise içine sararak await kullanabilirsiniz.

function readText(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = () => reject(reader.error);
    reader.readAsText(file);
  });
}

readText(file).then(text => console.log(text));

Modern Alternatif: file.text()

Modern tarayıcılar doğrudan file.text(), file.arrayBuffer() veya file.stream() çağırmanıza ve Promise döndürmenize izin verir. Bunlar birçok durumda FileReader'dan daha basittir.

async function show(file) {
  const text = await file.text();
  console.log(text);
}

show(file);

FileReader Neden Önemlidir?

FileReader, kullanıcı tarafından seçilen dosyaları tamamen tarayıcıda işlemenizi sağlar: görüntüleri önizleyebilir, CSV dosyalarını ayrıştırabilir veya yüklemeleri göndermeden önce doğrulayabilirsiniz. Okuma yöntemini ihtiyacınız olan veri türüne göre seçin: metin, veri URL'si veya ikili veri. Sırada Blob'ları ve nesne URL'lerini inceleyeceksiniz.

const reader = new FileReader();
reader.onload = () => console.log('ready to upload');
reader.readAsDataURL(file);

Kısa Kontrol

Bir görüntü önizlemesinin src özelliğine uygun 64 tabanlı dizeyi hangi FileReader yöntemi sağlar?

Özet: Dosyaları Okuma

Dosya içeriklerini okumayı öğrendiniz:

Dosyaları input.files üzerinden alın; okuma, onload aracılığıyla eşzamansız gerçekleşir.
readAsText, readAsDataURL ve readAsArrayBuffer farklı biçimler döndürür.
Güvenilirlik için onerror ve onprogress olaylarını yönetin.
Modern file.text() ve file.arrayBuffer(), Promise tabanlı alternatiflerdir.

Sıkça Sorulan Sorular

“FileReader ile Dosya Okuma” dersi ücretsiz mi?

Evet — “FileReader ile Dosya Okuma” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve JavaScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. JavaScript Academy kursu toplamda 4 dersten oluşur.

“FileReader ile Dosya Okuma” dersinde ne öğreneceğim?

Seçilen dosyaları metin veya veri URL'leri olarak okuyun. JavaScript Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

JavaScript Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te JavaScript Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“FileReader ile Dosya Okuma” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu JavaScript Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her JavaScript Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← JavaScript Academy Sayfasına Dön