Javascript Dosya Okuma

Merhabalar, Javascript derslerimize kaldığımız yerden devam ediyoruz. Bu dersimizde dosyayı metin dosyası şeklinde okumayı anlatacağım. Hadi başlayalım !

Öncelikle şunu belirtmem gerekiyorki, dosya okuma derken doğrudan bir dosyayı okuyamıyoruz, yani örneğin sunucuda bulunan bir dosyayı okuyamıyoruz. Bunun yerine kullanıcı tarafından seçilmiş bir dosyayı okuyabiliyoruz; yani blob dosyalarını. Bu yüzden bir tane file tipinde bir input ekleyelim ki kullanıcı buradan bir dosya seçebilsin. Ardından bir tane içi boş yani hiçbir veri olmayan span ekleyelim. Yani HTML tasarımı şu şekilde olacak;

<input type="file" id="dosya">
<br>
<span id="yazi"></span>

Javascript ile dosya okumak için FileReader sınıfını kullanacağız ve öncelikle tabiki yeni bir nesnesini türetmemiz gerekiyor. Ardından onload eventi ile dosyadan okuma yapılınca içi boş olan span nesnesini okunan veri ile dolduracağız. Son olarakta FileReader sınıfı nesnesine okuma yaptıracağız. Teorisi böyleydi, şimdide sıra kodda;

document.getElementById('dosya').addEventListener('change', () => {
    var fr = new FileReader();
    fr.onload = () => {
        document.getElementById('yazi').textContent = fr.result;
    }
    fr.readAsText(this.files[0]);
});

Ben file tipindeki input seçilir seçilmez okuma işlemi yaptırdım fakat siz dilerseniz bir tanede buton ekleyip butona tıklayınca okuma işlemi yaptırabilir ve yine dilerseniz okuduğunuz veri üzerinde işlemler yapabilirsiniz. Okunan veri String tipte olacağından String işlemleri yapabilirsiniz. Hazır aklıma gelmişken id değeri oku olan bir butona tıklayınca file tipindeki inputtan seçilen dosyayı okuyalım.

var fr = new FileReader();
fr.onload = () => {
    document.getElementById('cikti').innerText = fr.result;
}
document.getElementById('oku').addEventListener('click', () => {
    if (document.getElementById('dosya').files.length == 0)
        alert('Dosya Seçmediniz !');
    else
        fr.readAsText(document.getElementById('dosya').files[0]);
});

Burada yaptığımız tek değişiklik butona tıklama eventi ile id değeri dosya olan file tipindeki inputtan seçilen dosyayı okuttuk ve boş bıraktığımız cikti id değerli span nesnesine yazdırdık. Evet Javascript ile kullanıcı tarafından seçilen bir dosyayı okuma böyle yapılmakta.

Tüm Javascript derslerimize buraya tıklayarak ulaşabilirsiniz. Herkese hayırlı günler.