file input clear

웹 개발을 하다가 보면 보안 문제에 부딪히는 경우가 있다. 큰 보안 문제도 있는 반면 사소한 보안 문제도 있는데 개발을 하다 보면 file 타입의 input태그를 초기화 해주고 싶은 경우가 생긴다. 예를들면 form안에 file 타입의 input태그가 있고 사용자에 의해 form의 요소들이 전부 빈 값으로 초기화되기를 원하는 상황이 있을 수 있다. 그럴 때 아래와 같이 해주면 file 타입의 input태그를 clear할 수 있다.

---

제이쿼리 (jQuery)

$("input[type='file']").val(null);

AngularJS

angular.element("input[type='file'").val(null);

---

위에서 언급한 보안문제는 웹상에서는 보안상의 문제로 js수준에서 file타입의 input태그에 직접적으로 값을 넣어줄 수 없도록 막혀있다. 이러한 특성 때문에 file타입의 input태그는 초기화 즉, 화면을 처음 로딩했을 때 DB에 있는 데이터를 바로 넣어줄 수 없다는 말이다. 값을 넣는 대신 label을 이용해서 우회적으로 사용자에게 값이 바로 들어가는 경험을 할 수 있도록 만들면 되긴 하다.