jQuery: Upload Edilmeden Resim önizleme

jquery image previewjQuery ile gelen nimetlerden birini daha bugün inceleyelim. Form kullanarak upload edeceğimiz görsel dosyaları sunucuya yollamadan önce preview (önizleme) jQuery kodları ile mümkün. Kullanılabilirlik ve kolaylık için ziyaretçilerinize sunabilirsiniz. 

Formun file element değeri her değiştiğinde çalışan bu kod bloğu seçilen resimin local adresini ele alarak sayfada gösteriyor.

Demo uygulamanın kodları da bu mantık kadar basit aslında. Uygulamanın çalışan demosunu ve kaynak kodlarını yazının altında bulabilirsiniz.

Uygulama kodlarına geçelim; 

 


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<div class="upload-preview">

</div>
<input class="file" name="logo" type="file">

<script type="text/javascript">

$(document).ready(function(){
var preview = $(".upload-preview");

$(".file").change(function(event){
var input = $(event.currentTarget);
var file = input[0].files[0];
var reader = new FileReader();
reader.onload = function(e){
image_base64 = e.target.result;
preview.append("<img src='"+image_base64+"'/>");
};
reader.readAsDataURL(file);
});
});
</script>

7 thoughts on “jQuery: Upload Edilmeden Resim önizleme

  • Merhaba hocam, bir resmi seçtikten sonra değiştirmek için 2. kez seçtiğimizde ilk resmi değiştirmek yerine yanına yenisini ekliyor. 🙂

  • Bu yöntemi kullanıp Ürünler için bir kaç tane resim seçecek, yanlış seçileni kaldıracak, seçilen resimleri jcrop ile kesip yükleme yapacak bir jQuery, Ajax ve PHP uygulaması istesem.

  • Ön izlemeden sonra upload etmeden önce crop ve resize işlemini gerçekleştirecek java kodları var mı?

Bir Cevap Yazın

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