동일한 이름의 두 입력 필드 - 변경 이벤트시

Question

동일한 이름의 입력 필드가 두 개 있습니다. 이는 프로젝트의 비즈니스 로직 때문입니다.

그들은 그 모양 :

나는 변화에 event.But이 방법으로 입력 필드 후 이미지 이름을 추가 할 필요가

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

, 어떻게이 두 입력 사이의 차이를 만들기 위해?

나는 그들과 다른 것들을 시도하려했으나, 더 많은 필드를 추가하려면 clone 버튼이 있는데, 나는 이것이 변화 이벤트에서 작동하지 않을 것이라고 생각한다.

업데이트 : 내 코드를위한 변경 이벤트에서 다음입니다 :

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>

내가 변경된 입력을 찾을 $(this)를 사용하여 내 코드를 업데이트하고 내 코드는 같습니다

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

이벤트 처리기 내에서 this 키워드를 사용하여 이벤트를 발생시킨 요소를 식별 할 수 있습니다. 이 시도 : 두 번째 예와

$('.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" />

을 당신이있는 방식으로 forEach 전화 좀 이상한. 당신은 다음과 같이 반환 querySelectorAll에서 노드 목록에 forEach를 호출 할 수

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