Bildwähler mehr als eine

Question

Ich habe eine Seite und die Seite hat zwei Bildwähler. Ich habe eine davon codiert, um ein Bild anzuzeigen, wenn ich eine Bilddatei auswähle. Aber ich möchte sie getrennt benutzen. Ich habe es als angehängten Code versucht. Könnten Sie mir bitte helfen, wie kann ich sie getrennt machen? Wie kann ich separate Buttons mit PHP, Javascript oder jQuery erstellen?

Ich habe versucht, wie mein Code und es funktioniert nur für einen Selektor, nicht für andere.

<form id="form1"> 
    <input type="file" id="image-1-selector"> 
    <img src="#" id="first-image"> 
    <button type="reset" onclick="clearFile(event)">Clear</button><br /><br /> 

    <input type="file" id="image-2-selector"> 
    <img src="#" id="second-image"> 
    <button type="reset" onclick="clearFile(event)">Clear </button> 
</form> 

function readURL(input) { 
    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 
     reader.onload = function(e) { 
      $('#first-image').attr('src', e.target.result); 
     } 
     reader.readAsDataURL(input.files[0]); 
    } 
} 

$("#image-1-selector").change(function() { 
    readURL(this); 
}); 

var clearFile = function(event) { 
    var output = document.getElementById('first-image'); 
    output.src = ''; 
}; 

Answer 1

Zum einen können Sie Ihren Code vertrocknen von Klassen statt IDs unter Verwendung der Elemente auszuwählen. Von dort aus können Sie die DOM-Traversal-Methoden (in diesem Fall next() und prev()) verwenden, um die erforderlichen Elemente zum Ändern zu finden. Versuchen Sie folgendes:

<form id="form1"> 
    <input type="file" class="image-selector"> 
    <img src="#" class="preview"> 
    <button type="reset" class="clear">Clear </button><br /><br /> 

    <input type="file" class="image-selector"> 
    <img src="#" class="preview"> 
    <button type="reset" class="clear">Clear </button> 
</form> 

$(".image-selector").change(function() { 
    var el = this; 
    if (el.files && el.files[0]) { 
     var reader = new FileReader(); 
     reader.onload = function(e) { 
      $(el).next('.preview').prop('src', e.target.result); 
     } 
     reader.readAsDataURL(el.files[0]); 
    } 
}); 

$('.clear').click(function(event) { 
    $(this).prev('.preview').prop('src', ''); 
}); 

Updated fiddle