Eine Funktion für jedes Bild

Question

ich das hier jsfile

haben, um eine Vorschau ist meine Funktion

$(document).ready(function() { 
    function readURL(input) { 
     if (input.files && input.files[0]) { 
      var reader = new FileReader(); 

      reader.onload = function (e) { 
       $('.img-upload').attr('src', e.target.result); 
      } 

      reader.readAsDataURL(input.files[0]); 
     } 
    } 

    $(".input-upload").change(function(){ 
     readURL(this); 
     console.log(this.id); 
    }); 


}); 

Mein Problem ist die Klasse, ich bin using..I brauchen diese Funktion mit den Parametern oder etwas zu schaffen, für jede Eingabe und jedes Bild zu arbeiten ..wir arbeiten nur für eine Eingabe, müssen aber dynamisch sein.

Answer 1

Sie müssen input verwenden, um Ziel .siblings()img Element in der onload Handler von FileReader

$(input).siblings('img.img-upload').prop('src', e.target.result); 

Hier ist vereinfacht Updated Fiddle

oder

$(input).closest('.pic-box').find('img.img-upload').prop('src', e.target.result); 

Answer 2

Alter der src die Variable input unter Verwendung des Bildes in Bezug auf den gewählten Eingang zu bekommen:

$(input).closest('.fileContainer').find('.img-upload').attr('src', e.target.result);