HTML 5, File API’sı yardımıyla yerel dosyalarla etkileşim kurmak için standart bir yol sağlar. File API’si tek, çoklu ve BLOB dosyalarıyla etkileşime izin verir. FileReader API, JavaScript olay işleme ile birlikte bir dosyayı eşzamansız olarak okumak için kullanılabilir. Ancak, tüm tarayıcılarda HTML 5 desteği yoktur, bu nedenle File API’sini kullanmadan önce tarayıcı uyumluluğunu test etmek önemlidir. Yerel dosyaları okumak için FileReader API’sında dört dahili yöntem vardır:
- FileReader.readAsArrayBuffer(): Belirtilen giriş dosyasının içeriğini okur. result özniteliği, dosyanın verilerini temsil eden bir ArrayBuffer içerir.
- FileReader.readAsBinaryString(): Belirtilen giriş dosyasının içeriğini okur. result özniteliği, dosyadaki ham ikili verileri dize olarak içerir.
- FileReader.readAsDataURL(): Belirtilen giriş dosyasının içeriğini okur. result özelliği, dosyanın verilerini temsil eden bir URL içerir.
- FileReader.readAsText(): Belirtilen giriş dosyasının içeriğini okur. result niteliği, dosyanın içeriğini metin dizesi olarak içerir. Bu yöntem, kodlama sürümünü ikinci argüman olarak alabilir (gerekirse). Varsayılan kodlama UTF-8’dir.
Bu durumda, yerel.txt dosyasını okumak için FileReader.readAsText() yöntemini kullanıyoruz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <!DOCTYPE html> <html> <head> <title>Dosya Okuma</title> </head> <body> <!--Text Formatında dosya okuma--> <input type="file" name="dosya" id="dosya"> <br> <pre id="cikti"></pre> <script type="text/javascript"> document.getElementById('dosya') .addEventListener('change', function() { var fr=new FileReader(); fr.onload=function(){ document.getElementById('cikti') .textContent=fr.result; } fr.readAsText(this.files[0]); }) </script> </body> </html> |
Bu kod, input dosyasının içeriğini tam olarak aynı şekilde yazdırmak için kullanılır.
Yorum Yap