Bu makalemizde html’de belkide dosya paylaşımı için sıkça kullanmış olduğumuz input-file nesnesinden seçtiğimiz görselim sayfada nasıl gösterilebileceğine dair javascript koduna makale devamında gözatabilirsiniz.
İçerik
göster
Javascript ile kullanıcı tarafından seçilen görseli sayfada gösterme
Bu yapacağımız işlem ile ilgili hazırda bir sürü javascript kütüphanesi bulunmaktadır. İsterseniz onlardan birinide kullanabilrsiniz ve parametrik olması dolayısıyla işinizi daha kısa sürede giderebilirsiniz ama ihtiyacınıza göre geliştirme yapmak isterseniz alttaki koda uygun olarak ekleme ve çıkartmaları yaparak ve birazda css giydirerek istediğiniz şekilde kullanabilirsiniz.
Kod içerisinde kullanılan ve neredeyse tüm tarayıcılar tarafından desteklenen File API ve dosya okuma işini gören FileReader yapısına gözatabilirsiniz.
Örnek
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | document.getElementById('picField').onchange = function (evt) { var tgt = evt.target || window.event.srcElement, files = tgt.files; // FileReader destekleniyormu - doya varmı kontrolü yapılıyor if (FileReader && files && files.length) { var fr = new FileReader(); fr.onload = function () { document.getElementById(outImage).src = fr.result; } fr.readAsDataURL(files[0]); } // Desteklenmiyorsa else kısmı çalışacak else { // burada desteklenmeyen kütüphaneleri polyfill // yöntemi ile giderebilirsiniz // veya kullanıcıyı bilgilendirebilirsiniz. } } |
Tarayıcı Desteği
- IE 10
- Safari 6.0.2
- Chrome 7
- Firefox 3.6
- Opera 12.02
