Zwei Eingabefelder mit dem gleichen Namen - bei Änderung Ereignis

Question

Ich habe 2 Eingabefelder mit dem gleichen Namen - das ist, weil Geschäftslogik des Projekts.

Sie sehen wie folgt aus:

<input type="file" name="director_front_passport[]" class="app-file" id="director_front_passport" /> 
 
<input type="file" name="director_front_passport[]" class="app-file" />

Ich brauche Bildnamen nach Eingabefeld auf Änderung anhängen event.But auf diese Weise, wie Unterschied zwischen diesen zwei Eingängen zu machen?

Ich dachte zu versuchen, sie durch id Attr zu unterscheiden, aber ich habe clone Taste, um weitere Felder hinzuzufügen, und ich glaube nicht, dass dies auf Änderung Ereignis arbeiten wird.

Aktualisiert: Mein Code für auf Änderungsereignis ist die folgende:

var inputs = document.querySelectorAll('.app-file'); 
 
Array.prototype.forEach.call(inputs, function(input) 
 
{ 
 
    input.addEventListener('change', function(e) 
 
    { 
 
    //my code for displaying image 
 
    } 
 
}

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

ich meinen Code aktualisiert $(this) geänderten Eingang zu finden Verwendung und mein Code aussieht:

var inputs = document.querySelectorAll('.app-file'); 
 

 
     Array.prototype.forEach.call(inputs, function(input) 
 
     { 
 
      input.addEventListener('change', function(e) 
 
      { 
 
       var changed = $(this); 
 
       var label \t = changed.next(), 
 
        labelVal = label.innerHTML, 
 
        divName = label.next(); 
 
       fileName = e.target.value.split('\\').pop(); 
 
       divName.html(fileName); 
 
       
 
      }); 
 
      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type="file" name="director_front_passport[]" class="app-file" id="director_front_passport" /> 
 
<input type="file" name="director_front_passport[]" class="app-file" />

Answer 1

Sie können das Schlüsselwort this im Ereignishandler verwenden, um das Element zu identifizieren, das das Ereignis ausgelöst hat. Versuchen Sie folgendes:

$('.app-file').change(function() { 
 
    $(this).after('<div>' + this.files[0].name + '</div>'); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="file" name="director_front_passport[]" class="app-file" id="director_front_passport" /> 
 
<input type="file" name="director_front_passport[]" class="app-file" />

Mit Ihrem zweiten Beispiel ist es ein wenig seltsam forEach in der Art und Weise rufen Sie sind. Sie können nur forEach auf dem nodeList von querySelectorAll zurückrufen, wie folgt aus:

document.querySelectorAll('.app-file').forEach(function(input) { 
    input.addEventListener('change', function(e) { 
     // my code for displaying image 
    }) 
}