Javascript ile Resimleri Yüklemeden Önce Önizleme Yapmak

Bazen görselleri yüklemeden, sunucuya göndermeden önce önizleme yaptırmak isteyebilirsiniz. Gelin bunu nasıl yapacağımıza bir bakalım.

İlk olarak birden fazla görsel seçilebilmesi için multiple niteliği kullanacağız. Ayrıca sadece görsellerin seçilmesi içinde accept="image/*" tanımını eklememiz gerekiyor input etiketimize.

<input type="file" multiple accept="image/*" id="images">

Editörde Görüntüle

Ve seçilen görsellerin önizlemesini göstereceğimiz bir div daha ekleyelim.

<div id="preview"></div>

Editörde Görüntüle

Şimdi ilk olarak input'un change eventını dinleyeceğiz. Bir değişiklik olduğunda bunu yakalamak için;

const images = document.getElementById('images'),
      preview = document.getElementById('preview');

images.addEventListener('change', function(){
    // görseller seçildiğinde burası çalışır
});

İlk olarak preview divimizin içini boşaltalım.

preview.innerHTML = '';

Daha sonra eğer this.files değerini console'a basarsanız FileList objesi döndüğünü görebilirsiniz. Bunlar seçtiğimiz dosyaların objesi. Biz bunu array'e çevirip map() fonksiyonundan geçirerek her birisi için işlem yapmamız gerekiyor. Yani;

[...this.files].map(file => {
    // işlemleri burada yapacağız
});

Seçilen dosyanın içeriğini okumak için FileReader web apisini kullanacağız.

const reader = new FileReader();
reader.addEventListener('load', function(){
    // dosya başarıyla okunduğunda burası çalışacak
    console.log(this.result);
});
reader.readAsDataURL(file);

Artık load eventı içinde Image ile bir image nesnesi oluşturup görseli preview divine ekleyebiliriz.

const image = new Image();
image.height = 100;
image.title = file.name;
image.src = this.result;

preview.appendChild(image);

Toparlayacak olursak yukarıdaki işlemlerin tamamı şöyle gözükecek;

const images = document.getElementById('images'),
      preview = document.getElementById('preview');

images.addEventListener('change', function() {
    preview.innerHTML = '';
	[...this.files].map(file => {
		const reader = new FileReader();
		reader.addEventListener('load', function(){
			const image = new Image();
			image.height = 100;
			image.title = file.name;
			image.src = this.result;
			preview.appendChild(image);
		});
		reader.readAsDataURL(file);
	})
});

Örneği denemek için codepen demosuna bakabilirsin:
https://codepen.io/tayfunerbilen/pen/abJWyao