用于每个图像预览

Question

我有jsfile

这里的功能是我的功能

$(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); 
    }); 


}); 

我的问题是该类我是using..I需要创建参数什么的这个功能为每一个输入和图像工作..现在只为一个输入工作，但需要dinamically。

Answer 1

您需要使用input目标.siblings()img元素在onload处理器的FileReader

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

这是简化的Updated Fiddle

或

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

Answer 2

改变src使用变量input相对于所选择的输入图像得到：

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