Javascript ile Resim Önizleme
Javascript 28 Haziran, 2018

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.

Javascript ile Resim Önizleme

Kodlamaya devam!


Benzer Yazılar

Yorumlar

Javascript ile Resim Önizleme
Javascript 28 Haziran, 2018

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.

Javascript ile Resim Önizleme

Kodlamaya devam!


Benzer Yazılar

Yorumlar