이 기사의 예에서는 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); } } }