파일 형식 INPUT 요소 값을 지우(재설정)하는 JavaScript 방법

이 기사의 예에서는 JavaScript가 파일 유형 INPUT 요소의 값 지우기(재설정)를 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.

보안 제한으로 인해 스크립트는 값을 임의로 설정할 수 없으므로 다른 양식 입력 필드와 같은 속성을 사용하여 재설정할 수 없습니다.

파일 필드의 값을 재설정하는 방법은 크게 세 가지가 있습니다.

이 기사에서는 이 세 가지 방법의 브라우저 호환성과 장단점을 분석하고 비교적 완벽한 종합 솔루션의 코드와 데모를 제공합니다.

파일 도메인을 재설정하는 세 가지 방법:

1. 값 속성을 공백으로 설정합니다.

IE11 이상 및 IE가 아닌 최신 브라우저 Chrome/Firefox/Opera에 효과적입니다...

2. 대체할 새 파일 입력 요소를 복제하거나 생성합니다.

createElement 또는 cloneNode를 사용하여 모든 브라우저에 적용할 수 있는 교체용 새 요소를 복제하거나 생성합니다. 단점도 분명합니다. 즉, 교체 후에는 원래 바인딩된 이벤트 리스너가 손실되고 일부 사용자 정의 확장 속성도 손실됩니다. 이 문제 없이 사용할 수 있지만 이 방법을 사용하는 것은 보편적이지 않습니다.

3. 양식 요소의 재설정() 메서드를 호출합니다.

양식 요소의 재설정() 메서드는 양식의 모든 입력 요소를 재설정합니다. 이는 우리가 예상한 것과 다르므로 새 양식 개체를 만들고 파일 입력 요소를 재설정한 다음 파일의 입력 요소를 꺼내서 다시 제자리에 놓아 두 번째 방법의 단점이 발생하지 않도록 하세요.

1번 방법과 3번 방법을 함께 사용하면 모든 브라우저에서 호환 가능합니다.

자바스크립트 함수 코드는 다음과 같습니다.

function clearInputFile(f){
  if(f.value){
    try{
      f.value = ''; //for IE11, latest Chrome/Firefox/Opera...
    }catch(err){
    }
    if(f.value){ //for IE5 ~ IE10
      var form = document.createElement('form'), ref = f.nextSibling, p = f.parentNode;
      form.appendChild(f);
      form.reset();
      p.insertBefore(f,ref);
    }
  }
}