JavaScript ile Görselleri Yüklemeden Önizleme Yapmak

Bir çok yerde denk gelmişsinizdir, bir fotoğraf yüklerken seçtiğiniz anda sayfada önizlemesi gelir. Boyutu her ne olursa olsun, hiç beklemeden bu işlem gerçekleşir. Bunu anlık olarak javascript ile nasıl yapabileceğimi merak ettikten sonra biraz araştırma yaptım ve bulduklarımı test ederek başarıya ulaştım.. Şimdi sizlere de bunu göstermek istiyorum.

İlk olarak buna benzer örnekleri şu sitelerde görebilirsiniz;
– 500px.com
– twitter.com
– plus.google.com

Nasıl Yapılır?

Bunu bir API sayesinde (FileReader) yapıyoruz. Ancak bu javascript api’si her tarayıcıda desteklenmiyor. IE için 10 ve üstü destekliyor örneğin 🙂 Tahmin etmişsinizdir zaten. Her neyse, ie’den girenleri tespt edip ona göre farklı şeyler yaptırabilirsiniz, bu size kalmış. İşte şuan için tarayıcı desteği şu şekildedir;

JavaScript ile Görselleri Yüklemeden Önizleme Yapmak

İlk olarak yapmamız gereken şey, input change olduğunda bunu yakalamak..

$('input').change(function(e){
   // kodlar..
});

Şimdi ise seçilen fotoğraf objesini tanımlayalım;

var fotograf = e.target.files[0];

evet, objemizde elimizde.. Şimdi FileReader apisini başlatalım.

var reader = new FileReader();

Şimdi ise resmi okuyalım. Bunun için readAsDataURL metodunu kullanacağız. Parametre olarak fotoğraf objesini vereceğiz.

reader.readAsDataURL(fotograf);

Son olarak okuma işlemi başarılı ise onload ile gelen değeri alıp görünmesini istediğimiz bir yere yazdırağız.

reader.onload = function(evt){
	$('#result').attr('src', evt.target.result);
}

İşte hepsi bu kadar 🙂

Daha fazlası için;
https://developer.mozilla.org/en-US/docs/Web/API/FileReader

Tarayıcıların API desteğini bulmak

Kullanıcının girdiği tarayıcı api’yi desteklemiyor olabilir. Bu durumda bunu tespit etmek ve ona göre işlem yazmak gerekir.. API tespiti için şöyle bir mantık yürütebiliriz.

if (window.File && window.FileReader && window.FileList && window.Blob) {
     // destekliyor
} else {
     // desteklemiyor!
}

Bu işlemin çalışan demosuna aşağıdan göz atabilir ve indirebilirsiniz 🙂

http://www.uzmancevap.org/editor/4d6ab/onizleme

Çoklu Yükleme İşlemi

Çoklu seçimlerde ise bir for döngüsü yardımı ile sırasıyla aynı işlemleri uygulatabilirsiniz..

http://www.uzmancevap.org/editor/d3547/onizleme

Yayınlayan

Tayfun Erbilen

2009'dan beri web işleriyle uğraşan, aynı zamanda amatör müziklede ilgilenen sıradan birisi..

“JavaScript ile Görselleri Yüklemeden Önizleme Yapmak” üzerine 2 yorum

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir