Merhaba, bugün size JavaScript ile file inputtan seçilen bir görselin önizlemesini sunucuya yüklemeden ekrana bastırmayı anlatacağım.

Bir görseli sunucuya aktarmadan önce kullanıcıya o görseli JavaScript ile göstermemiz mümkün. Bunu birçok alanda kullanabiliriz örneğin profil fotoğrafı seçtirirken, slider ya da içerik görseli eklerken gibi.

Ben bu işlemi gerçekleştirirken bazı yerlerde uzunca JavaScript kodu yazmamak için jQuery 3.5.0 versiyonunu kullanıyor olacağım. Hadi başyalalım…

Öncelikle yapmamız gereken şey bir HTML5 sayfası oluşturmak.

<!DOCTYPE HTML>
<html>
  <head></head>
  
  <body></body>
</html>

Az önce jQuery kullanacağımızdan bahsetmiştim. Şimdi yukarıdaki kodumuza jQuery 3.5.0 versiyonunu, kodlarımızı yazacağımız main.js dosyamızı, bir adet file inputumuzu ve görsel seçildikten sonra önizlemeyi bastıracağımız bir <img> tagı ekliyoruz.

<!DOCTYPE HTML>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.js"></script>
    <script src="main.js"></script>
  </head>
  
  <body>
    <img src="" id="selected_image">
    <input type="file" id="file">
  </body>
</html>

Buraya kadar işin HTML kısmını tamamladık. Buradan sonrasını artık JavaScript devralacak.
Öncelikle yukarıda tanımlamış olduğumuz main.js dosyamızı açıyoruz sonra da kodlarımızı yazmaya başlıyoruz (ayrı bir dosyaya yazmak yerine sayfanın altında <script></script> tagları açarak
kodlarımızı bu tagın arasına da yazabiliriz).
İlk olarak eklememiz gereken kod tabii ki de file inputumuzu yakalamak ve dosya eklenip eklenmediğini anlamak. Bunun için şu kod bloğunu ekliyoruz.

$('#file').change(function() {
    if ($(this).prop('files')[0] != undefined) {
    }
})

jQuery kütüphanesini kullanarak $(“#file”) ile id değerini “file” yaptığımız inputumuzu yakaladık -eğer bunu JavaScript ile yapsaydık getDocumentsByID() gibi uzunca bir fonksiyon adı yazmamız gerekecekti- sonra da change() fonksiyonunu kullanarak bu inputta herhangi bir değişiklik olduğunda (bir görsel seçmek gibi) içine yazacağımız kodları çalıştırmasını sağladık. Change() fonksiyonunun içinde bir “if” bloğu var. Bu blokta $(this) ile jQuery‘nin tıkladığımız inputumuzu seçmesini ve prop() fonksiyonu ile de tıkladığımız file inputunun  “files” özelliğinin boş olup olmadığını kontrol etmesini sağladık.

Böylece artık son aşamaya gelmek üzereyiz. Son aşamada tıkladığımız file inputu eğer boş değilse yani herhangi bir dosya seçilmişse seçilen dosyayı <img> etiketi ile ekrana bastırmak.
Bunun için şu kodu yazmamız lazım:

 reader = new FileReader();
 reader.readAsDataURL($('input[name=file]').prop('files')[0]);
 reader.onload = function(e) {
  $(".selected_image").attr("src", e.target.result);
 };

Burada JavaScript içerisindeki FileReader‘i kullanacağız. ‘new’ constructorünü kullanarak “reader” adlı değişkenimize FileReader()‘i atıyoruz. Artık FileReader türünde bir reader değişkenimiz var yani FileReader classının içindeki tüm public özelliklere vs. reader değişkeni ile ulaşabiliriz.
readAsDataURL() fonksiyonuyla file inputumuzun içindeki dosyayı base64 türüne çeviriyoruz ve sonraki satırda atadığımız fonksiyonda “selected_image” classını verdiğimiz <img> etiketinin “src” attributesine oluşturulan base64 çıktısını ekliyoruz. Böylece yüklenmek istenen görselin sunucuya yüklenmeden önce son kullanıcıya gösterilmesini sağlamış olduk.

Umarım çok sıkıcı olmadan anlatabilmişimdir 🙂
Kodun tamamına ve diğer kodlara Github hesabımdan erişebilirsiniz.