Herkese merhabalar! Bu yazımda inputtan seçilen resmin javascript ile nasıl önizleme yapılacağını kodlarıyla beraber paylaşacağım. Böylece html sayfalarımızda hangi resmi seçtiğimizi kolayca görebileceğiz. Hemen kodlara geçecek olursak html sayfamızda bir input ve bir img elementi olsun. İnputtan seçtiğimiz resmi, img elementinde göstereceğiz.

<div class="container">
   <div class="row">
      <div class="col-sm-12 ">
         <h5>Select Image</h5>
         <input class="form-control" type="file" id="uploadImage" name="uploadImage" onchange="PreviewImage();" />
      </div>
      <div class="col-sm-12" style="margin-top: 20px;">
         <div class="text-center">      
            <img id="uploadPreview" class="img-fluid img" style="max-width: 100%;height: auto" /> 
         </div>
      </div>
   </div>
</div> 

Javascript kodlarımız ise şöyle olmalıdır. Burada inputtan seçilen resmin yolu img elementine src olarak atanıyor.

function PreviewImage() {
   var oFReader = new FileReader();
   oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]);
   oFReader.onload = function (oFREvent) {
      document.getElementById("uploadPreview").src = oFREvent.target.result;
   };       
}

Uygulamamızın ekran görüntüsü bu şekilde olacaktır. Projeyi buradan indirebilirsiniz.

Kodlamaya devam!