Общая функция для предварительного просмотра изображений перед загрузкой

Question

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

function readURL(input) { 

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

     reader.onload = function (e) {     
      $('#profileimagesrc').attr('src', e.target.result); 
     } 

     reader.readAsDataURL(input.files[0]); 
    } 
} 
$("#profileimage").change(function() { 
    readURL(this); 

}); 

Но у меня есть несколько столбцов, как:

<div class="form-row"> 
<div><span class="form-title">Profile Image</span></div> 
    <li class="form-control" style="width:100%;height:100%;"> 
    <img id="profileimagesrc" src="image/Image-default.jpg" style="width: 160px; height: 160px; margin-left: 11px; margin-bottom: 5px;" /> 
    <input type="file" name="profileimage" id="profileimage" onchange="readURL(this);"> 

    </li> 
     </div> 

<div class="form-row"> 
<div><span class="form-title">Book Image</span></div> 
    <li class="form-control" style="width:100%;height:100%;"> 
    <img id="bookimagesrc" src="image/Image-default.jpg" style="width: 160px; height: 160px; margin-left: 11px; margin-bottom: 5px;" /> 
    <input type="file" name="bookimage" id="bookimage" onchange="readURL(this);"> 

    </li> 
     </div> 

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

Это то, что я сделал:

function readURL(input) { 

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

     reader.onload = function (e) { 
      var imagesrc = input.parent().find('img',id()); 
      $('#imagesrc').attr('src', e.target.result); 
     } 

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

$(".image").change(function() { 
    var image = this.id; 
    readURL(image); 

}); 


</script> 

Эта функция хорошо работает: ("Изображение") $ изменить (функция() {...}

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

Answer 1

Может ли это быть HTML:.

<div class="form-row"> 
<div><span class="form-title">Profile Image</span></div> 
    <li class="form-control" style="width:100%;height:100%;"> 
<img src="image/Image-default.jpg" style="width: 160px; height: 160px; margin-left: 11px; margin-bottom: 5px;" /> 
    <input type="file" name="profileimage" onchange="readURL(this);"> 
</li> 
<li class="form-control" style="width:100%;height:100%;"> 
<img src="image/Image-default.jpg" style="width: 160px; height: 160px; margin-left: 11px; margin-bottom: 5px;" /> 
    <input type="file" name="bookimage" onchange="readURL(this);"> 
</li> 
</div> 

Тогда здесь идет обобщенную функцию:

<script type="text/javascript"> 

function readURL(input) { 

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

     reader.onload = function (e) { 
      $(input).siblings().attr('src', e.target.result); 
     } 

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


</script>