Merhaba gençler bu çalışamamızda sizlerle birlikte bir WebAPI si olan FileReader()' ı kullanarak yerel bir metin dosyasının içeriğinin nasıl okunabileceğini kabaca inceleceğiz. Bu için sizlerle aşağıda verdiğimi gibi basit web sayfası hazırlayacağız. Bu sayfada kullanıcının okumak istediği dosyayı seçmesini sağlayan < input type="file" / >etiketi ile metin dosyasının içeriğini satır satır görüntülerken kullanacağımız < textarea >< / textarea > etiketini ve elbette yapacağımız işlemi onaylarken < input type="button" / > etiketini kullanacağız. Tasarımızda karmaşıklıktan uzak sadece yapacağımız iş için gerekli biçimlendirme işlemlerini yapıyoruz ve bu amaçla yine en temel css özelliklerini ayarlıyoruz, metin rengi , zemin rengi, genişlik, yükseklik vb. Bu amaçla aşağıda verdiğim HTML kodlarını yazıyoruz.
< html >
< head >
< title >..:: Metin dosyasini okuma ::..< / title >
<meta http-equiv="Content-Type" content="text / htm; charset=utf-8" >
< / head >
<body >
<h1 id="baslik" >Web API - FileReader ile yerel metin dosyasını okumak< / h1 >
< div id="zemin" >< / div >
< div id="gosterge" >
< div id="sesKatmani" >< / div >
< div class="satir" style="height: 50px;" >
< div class="etiket" ><span >Dosya seç:< / span >< / div >
< div class="giris" >
<input type="file" id="txtFile" value="" style="padding: 5px 5px; font-size: medium; width:70%; color:crimson" / >
< / div >
< / div >
< div class="satir" >
< div class="etiket" ><span >Dosya içeriği< / span >< / div >
< div class="giris" >
<textarea id="txtIcerik" disabled="disabled" rows="4" style="width: 90%; font-size:large; color:crimson" >< / textarea >
< / div >
< / div >
< div class="satir" >
< div class="etiket" ><span > < / span >< / div >
< div class="giris" >
<input type="button" id="btnOku" onclick="oku()" value="Dosyayı oku" class="btnOzel" / ><br / >
< / div >
< / div >
< div class="satir" id="uyariKutusu" >< / div >
< / div >
< / body >
< / html >
Yukarıda verilen HTML kodlarını düzgün bir şekilde yazdıktan sonra şimdi sıra geldi biçilendirme işlemine bu amaçla da aşağıda verdiğim css kodlarını yazmanız gerekiyor. Biliyorsunuz ki CSS kodlarını < head /> etiketi içerisine yazıyoruz, sizlerin bunu zaten bildiğini varsayıyor ama yine de hatırlatmak istiyorum.
<style type="text/css">
#gosterge{
float:left;
margin-left:20px;
width:490px;
border:2px solid crimson;
box-shadow: 3px 3px 3px gray;
}
#baslik{
background-color:crimson;
padding: 5px 5px;
box-shadow: 3px 3px 3px gray;
color:white;
}
.btnOzel{
width: 90px;
height: 30px;
padding: 5px 5px;
text-align: center;
background-color:crimson;
color:white;
margin-right: 10px;
margin-top: 20px;
}
.satir{
height: 100px;
overflow: hidden;
}
.etiket{
float: left;
text-align: right;
color:crimson;
padding: 10px 10px;
margin-right: 5px;
width:25%;
font-size: medium;
}
.giris{
float: left;
color:crimson;
margin-left: 5px;
width: 60%;
font-size: medium;
margin-top: 5px;
}
#uyariKutusu{
text-align: center;
font-size: large;
color: white;
height: 100px;
}
style>
Tebrikler tüm bunları yaptığınızda aşağıda verdiğim ekran görüntüsünü elde etmiş olacaksanız. Elbette buraya kadar yaptıklarımız sadece sayfamıza gerekli kontrolleri eklemek ve bunları biçimlendirmekten ibaret idi. Şimdi sayfamızın işlerlik kazanması için gerekli javascript kodlarını yazalım.Kodlarda sizlere yeteri kadar açıklama satırı yazdığımı düşünüyorum. Bu satırları dikkatle okursanız düzeneğin nasıl çalıştığını rahatça anlayabilirsiniz.
Bu ekranda dosya seç ile içeriğini okumak istediğimiz dosyayı seçiyor ve sonrasında dosyaı oku düğmesini kullanarak dosya içeriğini görüntülüyoruz. Kullanıcı hiç bir dosya seçmez ise kendisine sesli ve görsel bir uyarı veriyoruz ayrıca metin türünden dosya seçmemişse yine kendisine sesli ve görsel bir uyarı veriyoruz. Bu örnek kısır bir örnek ve okuma metin olarak yapılıyor yani birisi mp3 tipindeki bir dosyanın uzantısını txt olarak değiştirip okumaya kalkarsa elbette olumlu sonuç alamaz. Böyle durumlarda binary okuma yapabilirsiniz. Şimdi gelelim asıl noktaya yani okumayı yapmak için yazdığımız JavaScript kodlarına ki bunlar da aşağıda verdiğim gibidir. Şimdiden sizlere kolay gelsin umarım faydalı olmuştur. Bu örneği alarak bir adım öteye taşımak isteyen arkadaşlarım hata yakalama kodlarını bu kodlara dahil edebilirler. Size mutlu kodlama günleri dilerim. Kalın sağlıcakla
<script language="javascript" type="text/javascript">
function oku(){
///////////////////////////////////////////////////////////////////
// Kodlama : Bilal SERT
// Tarih-saat : .../.../2020
// Amaç : secilen metin dosyasini okumak
// Giriş-çıkış :
// Çağrıldığı yer : btnOku.click()
// Çağırdıkları : dosyaTuruGecerliMi(), mesajVer()
///////////////////////////////////////////////////////////////////
var dosyaAdi=document.getElementById("txtFile").value;
var dosya=document.getElementById("txtFile").files[0];
if(dosyaAdi=="")
mesajVer("Lütfen okumak istediğiniz dosyayı seçiniz","hata1","crimson");
else if(!dosyaTuruGecerliMi(dosyaAdi)){
mesajVer("Sadece metin türünden dosyalari okuyabilirsiniz","hata1","crimson");
}else{
//yeni bir dosya okuyucu tanimlayalim
var okuyucu = new FileReader();
okuyucu.onload = function(event)
{
var icerik = event.target.result;
//icerigi satirlara ayiriyoruz
var satirlar = icerik.split('\n');
//her bir satir okunuyor ve uyari kutusunda goruntuleniyor
document.getElementById("uyariKutusu").innerHTML="";
for(let i=0;i<satirlar.length;i++){
document.getElementById("uyariKutusu").innerHTML+=satirlar[i] + ",";
}
//icerik textarea nesnesinde goruntuleniyor
document.getElementById("txtIcerik").innerHTML=icerik;
};
//dosyayi okuyoruz
okuyucu.readAsText(dosya);
}
}//end of resimGetir
function dosyaTuruGecerliMi(dosyaAdi){
///////////////////////////////////////////////////////////////////
// Kodlama : Bilal SERT
// Tarih-saat : .../.../2020
// Amaç : dosya uzantisi kontrol etmek
// txt icin true diger durumlar
// icin false sonucunu uretmek
// Giriş-çıkış : dosyaAdi metin turunden veri
// Çağrıldığı yer : oku()
///////////////////////////////////////////////////////////////////
var ayiklanan=dosyaAdi.split(".");
if(ayiklanan[1]=="txt")
return(true);
else
return(false);
}//end of dosyaTuruGecerliMi
function mesajVer(mesajMetni,islem,renk){
///////////////////////////////////////////////////////////////////
// Kodlama : Bilal SERT
// Tarih-saat : .../.../2020
// Amaç : kullaniciya sesli uyari ve mesaj vermek
// Giriş-çıkış : mesajMetni metin turunden veri,
// islem metin turunden veri ses dosyasinin adi
// renk metin turunden veri
// uyari kutusunun arka plan rengi
// Çağrıldığı yer : oku()
///////////////////////////////////////////////////////////////////
var ses= ";
ses+= "\"sesler/" + islem +".mp3\" type=\"audio/mpeg\">";
ses+="";
document.getElementById("sesKatmani").innerHTML=ses;
document.getElementById("uyariKutusu").style.boxShadow="2px 2px 2px #333";
document.getElementById("uyariKutusu").style.backgroundColor=renk;
document.getElementById("uyariKutusu").innerHTML=mesajMetni;
}//end of mesajVer
script>