Получить предварительный просмотр изображения?

Question

Я хочу добавить функцию загрузки изображения, и перед загрузкой файла он должен показать предварительный просмотр. Мой код отлично работает для первой части, как показано на изображении, размещенном ниже, но не может понять, почему он не работает для остальной части. Я добавил функцию загрузки изображений в конце каждого блока, но он показывает только предварительный просмотр для первого блока, а не для остальных.

Вот код для того же.

while($row = mysqli_fetch_array($result)){ 

<form enctype="multipart/form-data" id="form" action="" method="post"> 
     <input type="file" id="image" name="img" onChange="readURL(this);"/> 
     <img id="blah" src="#" alt="your image" /><br/><br/> 
     <input type="button" value="upload" onclick="javascript:uploadInage();" /> 
    </form> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 

<script> 

function readURL(input) { 

     if (input.files && input.files[0]) { 
     var reader = new FileReader(); 

     reader.onload = function (e) { 
      $('#blah') 
       .attr('src', e.target.result) 
       .width(300) 
       .height(340); 
     }; 

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


    } 
</script> 
} 

Это всего лишь часть всего PHP, который у меня есть.

Не могли бы вы помочь мне добавить функцию предварительного просмотра ко всему блоку.

Answer 1

<script> 

function readURL(input) {  
     if (input.files && input.files[0]) { 
     var reader = new FileReader(); 
     reader.onload = function (e) { 
      //$('#blah').attr('src', e.target.result).width(300).height(340); 
      $(input).next('img').attr('src', e.target.result).width(300).height(340); 
     }; 
     reader.readAsDataURL(input.files[0]); 
    } 

    } 
</script> 

Эта строка была использована раньше. Изменил его на следующей строке и отлично работает.