Generische Funktion für Vorschaubilder vor dem Hochladen

Question

Ich habe ein Formular mit einer Funktion mit Hochladen von Bildern auf verschiedenen Spalten. Ich möchte diese Bilder vor dem Upload ansehen. Ich habe eine Funktion, die diese Aufgabe auf einzelne Upload funktioniert das wie folgt lautet:

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); 

}); 

Aber wie ich mehrere Spalten haben, wie:

<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> 

Ich möchte eine generische Funktion erstellen, so dass ich konnte Verwenden Sie die Funktion einmal, um das Bild in der Vorschau anzuzeigen.

Dies ist das, was ich getan habe:

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> 

Diese Funktion funktioniert gut: ("Bild") $ Änderung (function() {...}

Ich glaube, ich bin. . nicht in der Lage, die ID des Bildes für die Eltern wählen Bitte leite mich, wie die ID des Tags auswählen, indem Sie die ID des Bildes auswählen

Answer 1

dies der HTML sein:.

<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> 

Dann geht hier die generische Funktion:

<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>