[HTML] input type='file'에서 change 이벤트가 안터지는 현상

이미지 파일을 업로드 하였는데, 이미지가 업로드 되지 않는 현상이 있었다.

 

디버깅을 해보니, change 함수가 두번째 업로드부터는 동작하지 않았다.

 

input type='file' 에서 파일을 업로드하면 터지는 이벤트인 change 가, 동일한 파일을 업로드 할 때 안터지는 현상이 있었다.

change 실행 함수에 로그를 찍어봐도 안찍힌다. 그냥 함수 자체가 실행이 안된다.

 

onChange(@change) 함수는 value가 변할때만 작동한다고 한다. 같은 파일을 업로드하면 input의 value가 변하지 않는다. event.target.value 값이 변경되어야 하는데, 같은 파일을 업로드하면 해당 값이 변경되지 않아 change 이벤트가 터지지 않는다는 것이었다.

 

때문에 처음 change 이벤트가 터진 뒤, e.target.value = ''; 코드를 사용하여 input의 value를 초기화 해줘야 한다.

 

''로 초기화해주면 이후 같은 파일을 업로드 하면 value가 ''로 되어있어 (change)=test() 함수가 작동하는 것을 확인할 수 있었다.