input file 타입 초기화

음... 프로젝트 하다보면 파일 업로드는 필수인데

이놈에 file 은 value = "" 이렇게 줘도 도통 먹질 않는다.

 

아무것도 모를때 멍하니 저렇게 썼다가 안먹어서 한참을 씩씩 거렸던 기억이 ㅋ

그래서 맨 처음에 해결했던 방법은 innerHTML 을 이용해서 해결했었다.

 

<div id="content">

       <input type="file" name="file" id="file" value="" />

</div>

위와 같은 div 영역에 input file 이 존재하고 있으면

document.getElementById("content").innerHTML = "<input type="file" name="file" id="file" value="" />";

위와 같이 div 영역에 input 을 innerHTML 을 이용하여 뿌려줬었다.

 

요즘에는 DOM Script 를 많이 이용하고 있다.

 

<div>

       <input type="file" name="file" id="file" value="" />

</div>

위와 같은 경우

var obj = document.getElementById("file"); // file 의 Object 를 가져와서

var parent = obj.parentNode; // file input 을 감싸고 있는 div 의 Object 를 얻어온다.

 

var input = document.createElement("input"); // input 을 하나 만들구

input.type = "file"; // type 을 file 로 지정

input.id = "file"; // id 를 file 로 지정

input.name = "file"; // name 을 file 로 지정

 

input.setAttribute("type", "file");

input.setAttribute("id", "file");

input.setAttribute("name", "file");

위와 같이 setAttribute 로도 가능하다.

 

parent.removeChild(obj ); // 기존에 있던 file input 을 삭제하고.

parent.appendChild(input); // div 에 가져다 붙인다.

 

innerHTML 을 사용하면 한줄로 간단하게 끝나는 장점이 있고

DOM 을 사용하면 웹 표준을 지킨다는 장점이 존재한다.

[출처] input file 타입 초기화|작성자 lbiryu

input text 클릭 시 value 값 삭제 (초기화)

<input type="text" onFocus="this.value='';return true;">