2018-01-23(javascript [input type file reset 법)

IE 에서의 <input type="file">의 리셋 방법

파일을 선택할 수 있는 방법을 제공하는 <input type="file"> 엘리먼트는 선택 된 파일이 변경 된 경우 change 이벤트를 발생시킵니다.

하지만 파일 선택창을 열어 동일한 파일을 연속해서 선택한 경우에는 선택 된 파일이 변경되지 않기 때문에 change 이벤트가 발생하지 않게 되는데, 이러한 경우에도 change 이벤트를 발생시키도록 하기 위해서는 파일폼을 초기화 해주는 작업(reset)이 필요합니다.

파일폼을 초기화 하기 위해 사용 할 수 있는 가장 간단한 방법은 <form> 엘리먼트의 reset 메서드를 호출하는 방법이지만 , 이 방법을 사용하면 파일폼 뿐 아니라 다른 입력폼도 함께 리셋되기 때문에 파일폼만 리셋하기 위해서는 별도의 방법을 사용해야 합니다.

먼저 여러가지 초기화 방법을 열거하면 다음과 같습니다.

1.파일폼의 value 를 지우는 방법

먼저 파일 폼의 value을 지우는 방법입니다.

elFileForm.value = '';

가장 간단한 방법이고 최근의 많은 브라우저에서 사용 가능한 방법이지만, IE의 경우 11이상의 버전에서만 사용 할 수 있습니다.

2.임시폼에 넣어서 리셋해주는 방법 

폼 내의 다른 입력폼과 함께 리셋 되지 않도록 파일폼만 별도의 <form> 엘리먼트 안으로 옮기고 reset시킨다음 다시 원래자리로 되돌리는 방법입니다. IE 10 을 제외한 모든 브라우저에서 사용가능한 방법이지만, IE 10 에서는 reset 된 것처럼 보이더라도 submit 을 할 경우 실제로는 파일이 전송되는 버그가 존재합니다.

function resetFileForm(elFileForm){
    var orgParent = elFileForm.parentNode;
    var orgNext = elFileForm.nextSibling;
 
    var tmp = document.createElement('form');
    tmp.appendChild(elFileForm);
 
    tmp.reset();
 
    orgParent.insertBefore(elFileForm,orgNext);
 
}
 
resetFileForm(elFileForm);

3.파일폼의 type을 다른걸로 바꿔줬다가 돌리는 방법

파일폼에 type 값으로 지정되어 있는 file을 다른걸로 바꿨다가 되돌리는 방법으로,IE 9 이상에서 사용가능합니다. 단, IE외의 브라우저에 이 방법을 사용하면 '찾아보기'버튼을 눌러도 아무런 반응이 없는 문제가 발생할 수 있으니 구별해서 사용되어야 합니다.

elFileForm.type = 'radio';
elFileForm.type = 'file';

위 내용에 따라 각 방법을 사용가능한 브라우저를 정리하면 아래와 같습니다.

	IE 6	IE 7	IE 8	IE 6	IE 10	IE 11	기타
1.	X	X	X	X	X	O	O
2.	O	O	O	O	X	O	O
3.	X	X	X	O	O	O	X

때문에 모든 브라우저에서 파일폼을 초기화 할수 있도록 구현하기 위해서는 IE 10 만 3번의 방법을 사용하고 , 나머지 브라우저는 2번의 방법을 사용하는 식으로 조합해서 구현하는 것을 추천한다.

출처 : http://jindo.dev.naver.com/blog/2014/01/136 (2014 / 01 / 02)