{"id":30042,"date":"2025-09-22T21:40:25","date_gmt":"2025-09-22T18:40:25","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/javascript-filereader-apisi-ile-dosya-okuma-ve-isleme\/"},"modified":"2025-09-22T21:40:25","modified_gmt":"2025-09-22T18:40:25","slug":"javascript-filereader-apisi-ile-dosya-okuma-ve-isleme","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/javascript-filereader-apisi-ile-dosya-okuma-ve-isleme\/","title":{"rendered":"JavaScript FileReader API’si ile Dosya Okuma ve \u0130\u015fleme"},"content":{"rendered":"

# JavaScript FileReader API ile Dosya Okuma ve \u0130\u015fleme<\/p>\n

Web uygulamalar\u0131n\u0131zda kullan\u0131c\u0131lar\u0131n bilgisayarlar\u0131ndan dosya y\u00fcklemesini ve bu dosyalar\u0131 i\u015flemesini sa\u011flamak m\u0131 istiyorsunuz? JavaScript’in g\u00fc\u00e7l\u00fc FileReader<\/code> API’s\u0131 ile bunu kolayca yapabilirsiniz. Bu makale, FileReader<\/code> API’s\u0131n\u0131 ad\u0131m ad\u0131m \u00f6\u011freterek, ger\u00e7ek d\u00fcnya senaryolar\u0131yla ve performans optimizasyon teknikleriyle destekleyecektir. Yeni ba\u015flayanlardan ileri seviye geli\u015ftiricilere kadar herkesin faydalanabilece\u011fi kapsaml\u0131 bir rehber sunmay\u0131 hedefliyoruz.<\/p>\n

JavaScript FileReader API’s\u0131 Nedir?<\/strong><\/p>\n

FileReader<\/code> API’s\u0131, JavaScript’te yerle\u015fik bir nesnedir ve taray\u0131c\u0131 ortam\u0131nda \u00e7al\u0131\u015fan web uygulamalar\u0131n\u0131n, kullan\u0131c\u0131 taraf\u0131ndan y\u00fcklenen dosyalar\u0131 (\u00f6rne\u011fin, resim, metin, PDF vb.) okuyup i\u015flemesini sa\u011flar. Bu API, asenkron i\u015flemlerle \u00e7al\u0131\u015f\u0131r, yani dosya okunurken uygulaman\u0131z\u0131n di\u011fer b\u00f6l\u00fcmlerinin \u00e7al\u0131\u015fmaya devam etmesini sa\u011flar. FileReader<\/code> nesnesi, \u00e7e\u015fitli y\u00f6ntemler sunarak dosyalar\u0131 metin olarak, veri dizisi olarak veya URL olarak okumay\u0131 m\u00fcmk\u00fcn k\u0131lar. Bu, dosya i\u00e7eri\u011finin i\u015flenmesi, \u00f6nizlenmesi veya sunucuya g\u00f6nderilmesi gibi bir\u00e7ok farkl\u0131 senaryoda kullan\u0131labilir. \u00d6rne\u011fin, bir g\u00f6r\u00fcnt\u00fc y\u00fckleyici uygulamas\u0131nda, FileReader<\/code> kullanarak y\u00fcklenen g\u00f6r\u00fcnt\u00fcy\u00fc \u00f6nizleyebilir ve ard\u0131ndan sunucuya g\u00f6nderebilirsiniz. Benzer \u015fekilde, bir metin d\u00fczenleyici uygulamas\u0131nda, FileReader<\/code> kullanarak kullan\u0131c\u0131n\u0131n y\u00fckledi\u011fi metin dosyas\u0131n\u0131 okuyup d\u00fczenleyebilirsiniz. FileReader<\/code> API’s\u0131, modern web geli\u015ftirmede temel bir bile\u015fendir ve bir\u00e7ok g\u00fc\u00e7l\u00fc uygulama geli\u015ftirmenize olanak tan\u0131r.<\/p>\n

FileReader API’s\u0131n\u0131 Kullanmaya Ba\u015flamak: Temel Kavramlar<\/strong><\/p>\n

FileReader<\/code> API’s\u0131n\u0131 kullanmak i\u00e7in \u00f6ncelikle bir <\/code> elementi kullanarak kullan\u0131c\u0131dan dosya se\u00e7imi alman\u0131z gerekir. Se\u00e7ilen dosya, FileReader<\/code> nesnesi kullan\u0131larak i\u015flenir. \u0130\u015fte temel ad\u0131mlar:<\/p>\n

1. Dosya Se\u00e7imi:<\/strong> Kullan\u0131c\u0131dan dosya se\u00e7imi i\u00e7in bir <\/code> elementi olu\u015fturun. Bu elementin change<\/code> olay\u0131n\u0131 dinleyerek, kullan\u0131c\u0131 bir dosya se\u00e7ti\u011finde tetiklenen bir fonksiyon tan\u0131mlay\u0131n.<\/p>\n

2. FileReader Nesnesi Olu\u015fturma:<\/strong> Kullan\u0131c\u0131 bir dosya se\u00e7ti\u011finde, FileReader<\/code> nesnesinin yeni bir \u00f6rne\u011fini olu\u015fturun.<\/p>\n

3. Dosya Okuma Y\u00f6ntemi Se\u00e7imi:<\/strong> FileReader<\/code> nesnesi, dosyay\u0131 farkl\u0131 formatlarda okumak i\u00e7in \u00e7e\u015fitli y\u00f6ntemler sunar:<\/p>\n

* readAsText(file, encoding)<\/code>: Dosyay\u0131 metin olarak okur. encoding<\/code> parametresi, dosyan\u0131n kodlamas\u0131n\u0131 belirtir (\u00f6rne\u011fin, “UTF-8”).
\n * readAsDataURL(file)<\/code>: Dosyay\u0131 bir veri URL’si olarak okur. Bu, dosyan\u0131n i\u00e7eri\u011fini base64 kodlamas\u0131yla temsil eder ve genellikle resimleri \u00f6nizlemek i\u00e7in kullan\u0131l\u0131r.
\n * readAsArrayBuffer(file)<\/code>: Dosyay\u0131 bir ArrayBuffer olarak okur. Bu, dosyan\u0131n ham verilerini i\u015flemeyi gerektiren durumlar i\u00e7in kullan\u0131\u015fl\u0131d\u0131r.
\n * readAsBinaryString(file)<\/code>: Dosyay\u0131 ikili bir dize olarak okur (eskimi\u015f y\u00f6ntem, readAsArrayBuffer<\/code> tercih edilmelidir).<\/p>\n

4. Olay Dinleyicileri:<\/strong> FileReader<\/code> nesnesinin onload<\/code>, onerror<\/code>, onprogress<\/code> olaylar\u0131n\u0131 dinleyerek, dosya okuma i\u015fleminin durumunu izleyebilirsiniz. onload<\/code> olay\u0131, dosya ba\u015far\u0131yla okundu\u011funda tetiklenir; onerror<\/code> olay\u0131, bir hata olu\u015ftu\u011funda tetiklenir; onprogress<\/code> olay\u0131 ise dosya okunma i\u015fleminin ilerlemesini izlemek i\u00e7in kullan\u0131l\u0131r.<\/p>\n

5. Veri \u0130\u015fleme:<\/strong> Dosya ba\u015far\u0131yla okunduktan sonra (onload<\/code> olay\u0131), result<\/code> \u00f6zelli\u011fi kullan\u0131larak dosya i\u00e7eri\u011fine eri\u015febilirsiniz.<\/p>\n

Uygulamal\u0131 K\u0131lavuz: Metin Dosyas\u0131 Okuma<\/strong><\/p>\n

A\u015fa\u011f\u0131daki \u00f6rnekte, kullan\u0131c\u0131dan bir metin dosyas\u0131 se\u00e7mesini ve dosyan\u0131n i\u00e7eri\u011fini ekranda g\u00f6stermesini sa\u011flayan bir JavaScript kodu verilmi\u015ftir:<\/p>\n

const fileInput = document.getElementById('fileInput');\nconst outputArea = document.getElementById('outputArea');\n\nfileInput.addEventListener('change', function(e) {\n  const file = e.target.files[0];\n  if (file) {\n    const reader = new FileReader();\n    reader.onload = function(e) {\n      outputArea.textContent = e.target.result;\n    };\n    reader.onerror = function(e) {\n      outputArea.textContent = 'Dosya okunamad\u0131.';\n    };\n    reader.readAsText(file);\n  }\n});<\/code><\/pre>\n
Bu kodda, fileInput<\/code> ID’li bir <\/code> elementi ve outputArea<\/code> ID’li bir <\/p>\n
<\/code> elementi oldu\u011funu varsay\u0131yoruz.  Kullan\u0131c\u0131 bir dosya se\u00e7ti\u011finde, FileReader<\/code> nesnesi dosyay\u0131 metin olarak okur (readAsText<\/code>) ve sonu\u00e7 outputArea<\/code>‘ya yazd\u0131r\u0131l\u0131r.  Hata durumunda ise bir hata mesaj\u0131 g\u00f6sterilir.  Bu basit \u00f6rnek, FileReader<\/code> API’s\u0131n\u0131n temel kullan\u0131m\u0131n\u0131 g\u00f6stermektedir.  HTML yap\u0131s\u0131 a\u015fa\u011f\u0131daki gibi olabilir:<\/p>\n
<input type="file" id="fileInput">\n<div id="outputArea"><\/div><\/code><\/pre>\n
Uygulamal\u0131 K\u0131lavuz: Resim Dosyas\u0131 \u00d6n G\u00f6r\u00fcnt\u00fcleme<\/strong><\/p>\n
\u015eimdi ise, kullan\u0131c\u0131dan bir resim dosyas\u0131 se\u00e7mesini ve se\u00e7ilen resmin \u00f6nizlemesini ekranda g\u00f6stermesini sa\u011flayan bir \u00f6rnek olu\u015ftural\u0131m:<\/p>\n
const fileInput = document.getElementById('fileInput');\nconst imgPreview = document.getElementById('imgPreview');\n\nfileInput.addEventListener('change', function(e) {\n  const file = e.target.files[0];\n  if (file) {\n    const reader = new FileReader();\n    reader.onload = function(e) {\n      imgPreview.src = e.target.result;\n    };\n    reader.onerror = function(e) {\n      imgPreview.src = 'hata.jpg'; \/\/ Hata durumunda varsay\u0131lan resim\n    };\n    reader.readAsDataURL(file);\n  }\n});<\/code><\/pre>\n
Bu kod, readAsDataURL<\/code> metodunu kullanarak dosyay\u0131 bir veri URL’si olarak okur ve bu URL’yi <\/code> elementinin src<\/code> \u00f6zelli\u011fine atar.  Bu sayede, se\u00e7ilen resim an\u0131nda \u00f6nizlenir.  HTML yap\u0131s\u0131 ise \u015f\u00f6yle olabilir:<\/p>\n
<input type="file" id="fileInput">\n<img id="imgPreview" alt="Resim \u00d6n G\u00f6r\u00fcnt\u00fcs\u00fc"><\/code><\/pre>\n
Ger\u00e7ek D\u00fcnya Senaryolar\u0131: B\u00fcy\u00fck Dosyalar ve Performans Optimizasyonu<\/strong><\/p>\n
B\u00fcy\u00fck dosyalarla \u00e7al\u0131\u015f\u0131rken, performans \u00f6nemli bir fakt\u00f6rd\u00fcr.  B\u00fcy\u00fck dosyalar\u0131 okumak zaman alabilir ve kullan\u0131c\u0131 deneyimini olumsuz etkileyebilir.  Bu sorunlar\u0131 azaltmak i\u00e7in a\u015fa\u011f\u0131daki optimizasyon tekniklerini kullanabilirsiniz:<\/p>\n
* \u00c7al\u0131\u015fan \u0130lerleme G\u00f6stergesi:<\/strong> onprogress<\/code> olay\u0131n\u0131 kullanarak dosya okuma i\u015fleminin ilerlemesini takip edin ve kullan\u0131c\u0131ya bir ilerleme \u00e7ubu\u011fu g\u00f6sterin.  Bu, kullan\u0131c\u0131n\u0131n bekleme s\u00fcresini daha iyi anlamas\u0131n\u0131 sa\u011flar.<\/p>\n
* Par\u00e7al\u0131 Okuma:<\/strong> \u00c7ok b\u00fcy\u00fck dosyalar\u0131 tek seferde okumak yerine, daha k\u00fc\u00e7\u00fck par\u00e7alara b\u00f6lerek okuyabilirsiniz.  Bu, bellekte daha az yer kaplar ve performans\u0131 art\u0131r\u0131r.  slice()<\/code> metodu kullan\u0131larak dosyalar par\u00e7alar halinde okunabilir.<\/p>\n
* Web Workers:<\/strong>  FileReader<\/code> API’s\u0131 ana i\u015f par\u00e7ac\u0131\u011f\u0131nda \u00e7al\u0131\u015f\u0131r.  B\u00fcy\u00fck dosyalarla \u00e7al\u0131\u015f\u0131rken, ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131n bloke olmamas\u0131 i\u00e7in Web Workers kullanabilirsiniz. Web Workers, arka planda \u00e7al\u0131\u015fan ayr\u0131 bir i\u015f par\u00e7ac\u0131\u011f\u0131 olu\u015fturarak ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131n performans\u0131n\u0131 etkilemeden dosya okuma i\u015flemini ger\u00e7ekle\u015ftirebilir.<\/p>\n
\u0130leri Seviye Teknikler: Hata Y\u00f6netimi ve Edge Case’ler<\/strong><\/p>\n
* Hata T\u00fcrlerini Yakalama:<\/strong> onerror<\/code> olay\u0131, dosya okuma i\u015flemi s\u0131ras\u0131nda olu\u015fan hatalar\u0131 yakalamak i\u00e7in kullan\u0131l\u0131r.  Hata t\u00fcrlerini inceleyerek, daha spesifik hata mesajlar\u0131 g\u00f6sterebilir ve kullan\u0131c\u0131ya daha iyi bir geri bildirim sa\u011flayabilirsiniz.<\/p>\n
* Dosya T\u00fcr\u00fc Do\u011frulamas\u0131:<\/strong>  FileReader<\/code> API’s\u0131 her dosya t\u00fcr\u00fcn\u00fc okuyabilir, ancak her dosya t\u00fcr\u00fc i\u00e7in uygun okuma y\u00f6ntemini se\u00e7mek \u00f6nemlidir.  \u00d6rne\u011fin, bir metin dosyas\u0131 i\u00e7in readAsText<\/code> kullan\u0131rken, bir resim dosyas\u0131 i\u00e7in readAsDataURL<\/code> kullanmal\u0131s\u0131n\u0131z.  Yanl\u0131\u015f y\u00f6ntem se\u00e7imi hatalara yol a\u00e7abilir.  Dosya t\u00fcr\u00fcn\u00fc do\u011frulamak i\u00e7in file.type<\/code> \u00f6zelli\u011fini kullanabilirsiniz.<\/p>\n
* G\u00fcvenlik:<\/strong> Kullan\u0131c\u0131 taraf\u0131ndan y\u00fcklenen dosyalar\u0131n g\u00fcvenli\u011fi \u00e7ok \u00f6nemlidir.  Dosyalar\u0131 sunucuya g\u00f6ndermeden \u00f6nce, zararl\u0131 kod i\u00e7erip i\u00e7ermediklerini kontrol etmeniz gerekir.  Bu i\u015flem, sunucu taraf\u0131nda yap\u0131lmal\u0131d\u0131r.  Hi\u00e7bir zaman istemci taraf\u0131nda g\u00fcvenlik kontrol\u00fcne tamamen g\u00fcvenmeyin.<\/strong><\/p>\n
\u00d6\u011frenme Yol Haritas\u0131<\/strong><\/p>\n
Yeni Ba\u015flayan:<\/strong>  Yukar\u0131da verilen metin ve resim okuma \u00f6rneklerini inceleyin ve kendi uygulamalar\u0131n\u0131zda deneyin.  FileReader<\/code> API’s\u0131n\u0131n temel kavramlar\u0131n\u0131 anlay\u0131n.  [fatihsoysal.com](https:\/\/fatihsoysal.com) sitesinden daha fazla JavaScript \u00f6\u011frenme kaynaklar\u0131na g\u00f6z atabilirsiniz.<\/p>\n
Orta Seviye:<\/strong>  B\u00fcy\u00fck dosyalar i\u00e7in performans optimizasyon tekniklerini uygulay\u0131n.  onprogress<\/code> olay\u0131n\u0131 kullanarak bir ilerleme \u00e7ubu\u011fu olu\u015fturun.  Farkl\u0131 dosya t\u00fcrleriyle \u00e7al\u0131\u015fmay\u0131 deneyin ve dosya t\u00fcr\u00fc do\u011frulamas\u0131n\u0131 uygulay\u0131n.<\/p>\n
\u0130leri Seviye:<\/strong>  Web Workers kullanarak performans\u0131 daha da iyile\u015ftirin.  Ayr\u0131nt\u0131l\u0131 hata y\u00f6netimi uygulay\u0131n ve farkl\u0131 hata t\u00fcrlerini yakalay\u0131n.  G\u00fcvenlik hususlar\u0131n\u0131 dikkate alarak, sunucu taraf\u0131nda ek g\u00fcvenlik \u00f6nlemleri al\u0131n.  Performans analiz ara\u00e7lar\u0131 kullanarak uygulaman\u0131z\u0131n performans\u0131n\u0131 \u00f6l\u00e7\u00fcn ve iyile\u015ftirmeler yap\u0131n.<\/p>\n
Sonu\u00e7<\/strong><\/p>\n
FileReader<\/code> API’s\u0131, web uygulamalar\u0131n\u0131zda kullan\u0131c\u0131 taraf\u0131ndan y\u00fcklenen dosyalar\u0131 i\u015flemek i\u00e7in g\u00fc\u00e7l\u00fc ve esnek bir ara\u00e7t\u0131r.  Bu makalede, FileReader<\/code> API’s\u0131n\u0131 kullanman\u0131n temel ad\u0131mlar\u0131ndan, ger\u00e7ek d\u00fcnya senaryolar\u0131na ve performans optimizasyonuna kadar geni\u015f bir yelpazeyi ele ald\u0131k.  Bu bilgilerle, kendi web uygulamalar\u0131n\u0131zda FileReader<\/code> API’s\u0131n\u0131 etkin bir \u015fekilde kullanabilir ve kullan\u0131c\u0131 deneyimini geli\u015ftirebilirsiniz.<\/p>\n
S\u0131k\u00e7a Sorulan Sorular:<\/strong><\/p>\n
1. FileReader<\/code> API’s\u0131 hangi taray\u0131c\u0131larda desteklenir?<\/strong>  Modern taray\u0131c\u0131larda geni\u015f destek g\u00f6r\u00fcr.  Eski taray\u0131c\u0131lar i\u00e7in polyfill kullanman\u0131z gerekebilir.<\/p>\n
2. B\u00fcy\u00fck dosyalar\u0131 i\u015flerken bellek sorunlar\u0131yla nas\u0131l ba\u015fa \u00e7\u0131kabilirim?<\/strong>  Par\u00e7al\u0131 okuma ve Web Workers kullanarak bellek kullan\u0131m\u0131n\u0131 azaltabilirsiniz.<\/p>\n
3. FileReader<\/code> API’s\u0131 g\u00fcvenli midir?<\/strong>  FileReader<\/code> API’s\u0131 kendi ba\u015f\u0131na g\u00fcvenlidir, ancak kullan\u0131c\u0131 taraf\u0131ndan y\u00fcklenen dosyalar\u0131n g\u00fcvenli\u011fini sa\u011flamak i\u00e7in sunucu taraf\u0131nda ek g\u00fcvenlik \u00f6nlemleri alman\u0131z gerekir.<\/p>\n
4. Dosya okuma i\u015flemi s\u0131ras\u0131nda olu\u015fan hatalar\u0131 nas\u0131l yakalayabilirim?<\/strong>  onerror<\/code> olay\u0131n\u0131 kullanarak hatalar\u0131 yakalayabilir ve uygun hata mesajlar\u0131n\u0131 g\u00f6sterebilirsiniz.<\/p>\n
5. readAsDataURL<\/code> ve readAsText<\/code> aras\u0131ndaki fark nedir?<\/strong> readAsDataURL<\/code>, dosyay\u0131 bir veri URL’si olarak okurken, readAsText<\/code> dosyay\u0131 metin olarak okur.  Resim gibi ikili dosyalar i\u00e7in readAsDataURL<\/code>, metin dosyalar\u0131 i\u00e7in readAsText<\/code> kullan\u0131lmal\u0131d\u0131r.<\/p>\n
Yazar: Fatih Soysal<\/p>\n","protected":false},"excerpt":{"rendered":"# JavaScript FileReader API ile Dosya Okuma ve \u0130\u015fleme Web uygulamalar\u0131n\u0131zda kullan\u0131c\u0131lar\u0131n bilgisayarlar\u0131ndan dosya y\u00fcklemesini ve bu dosyalar\u0131…","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[129],"tags":[],"class_list":{"0":"post-30042","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-javascript","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\nJavaScript FileReader API'si ile Dosya Okuma ve \u0130\u015fleme<\/title>\n<meta name=\"description\" content=\"Hi\u00e7bir etiketi bulunamad\u0131.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/javascript-filereader-apisi-ile-dosya-okuma-ve-isleme\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript FileReader API'si ile Dosya Okuma ve \u0130\u015fleme\" \/>\n<meta property=\"og:description\" content=\"Hi\u00e7bir etiketi bulunamad\u0131.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/javascript-filereader-apisi-ile-dosya-okuma-ve-isleme\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-09-22T18:40:25+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascript-filereader-apisi-ile-dosya-okuma-ve-isleme\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascript-filereader-apisi-ile-dosya-okuma-ve-isleme\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"JavaScript FileReader API’si ile Dosya Okuma ve \u0130\u015fleme\",\"datePublished\":\"2025-09-22T18:40:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascript-filereader-apisi-ile-dosya-okuma-ve-isleme\/\"},\"wordCount\":1383,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"Javascript\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/javascript-filereader-apisi-ile-dosya-okuma-ve-isleme\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascript-filereader-apisi-ile-dosya-okuma-ve-isleme\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/javascript-filereader-apisi-ile-dosya-okuma-ve-isleme\/\",\"name\":\"JavaScript FileReader API'si ile Dosya Okuma ve \u0130\u015fleme\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-09-22T18:40:25+00:00\",\"description\":\"Hi\u00e7bir etiketi bulunamad\u0131.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascript-filereader-apisi-ile-dosya-okuma-ve-isleme\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/javascript-filereader-apisi-ile-dosya-okuma-ve-isleme\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascript-filereader-apisi-ile-dosya-okuma-ve-isleme\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript FileReader API’si ile Dosya Okuma ve \u0130\u015fleme\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"JavaScript FileReader API'si ile Dosya Okuma ve \u0130\u015fleme","description":"Hi\u00e7bir etiketi bulunamad\u0131.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/javascript-filereader-apisi-ile-dosya-okuma-ve-isleme\/","og_locale":"tr_TR","og_type":"article","og_title":"JavaScript FileReader API'si ile Dosya Okuma ve \u0130\u015fleme","og_description":"Hi\u00e7bir etiketi bulunamad\u0131.","og_url":"https:\/\/fatihsoysal.com\/blog\/javascript-filereader-apisi-ile-dosya-okuma-ve-isleme\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-09-22T18:40:25+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"8 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/javascript-filereader-apisi-ile-dosya-okuma-ve-isleme\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/javascript-filereader-apisi-ile-dosya-okuma-ve-isleme\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"JavaScript FileReader API’si ile Dosya Okuma ve \u0130\u015fleme","datePublished":"2025-09-22T18:40:25+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/javascript-filereader-apisi-ile-dosya-okuma-ve-isleme\/"},"wordCount":1383,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["Javascript"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/javascript-filereader-apisi-ile-dosya-okuma-ve-isleme\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/javascript-filereader-apisi-ile-dosya-okuma-ve-isleme\/","url":"https:\/\/fatihsoysal.com\/blog\/javascript-filereader-apisi-ile-dosya-okuma-ve-isleme\/","name":"JavaScript FileReader API'si ile Dosya Okuma ve \u0130\u015fleme","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-09-22T18:40:25+00:00","description":"Hi\u00e7bir etiketi bulunamad\u0131.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/javascript-filereader-apisi-ile-dosya-okuma-ve-isleme\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/javascript-filereader-apisi-ile-dosya-okuma-ve-isleme\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/javascript-filereader-apisi-ile-dosya-okuma-ve-isleme\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"JavaScript FileReader API’si ile Dosya Okuma ve \u0130\u015fleme"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/30042","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=30042"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/30042\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=30042"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=30042"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=30042"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}