파일 업로드 버튼을 이미지로 바꾸기

<span style="width:100px; height:24px;background-image:url('/button.gif');">
      <input type="file" name="myfile" style="width:0;height:18px;filter:alpha(opacity=0);cursor:hand;">
</span>

파일 객체의 경로창을 없애기 위해 width를 0으로 주고 alpha 필터를 적용하여 투명도를 0으로 만들고 span으로 감싼뒤 백그라운드 이미지를 적용해 주면 끝.


● 파일 객체 초기화

file.parentNode.innerHTML = "<input type=\"file\" name=\"myfile\" style=\"width:0;height:18px;filter:alpha(opacity=0);cursor:hand;\">";

파일 객체는 value 값으로 초기화가 안되므로 위와 같은 방법을 사용한다.
이때 Parent는 span 객체가 되고 span 객체 내에는 파일 객체밖에 없으므로 innerHTML로 다시 써준다.

AND