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

<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로 다시 써준다.

기존의 파일과 동일한 파일명으로 이미지를 업로드 했을때 파일이 변경 됐음에도 계속 캐쉬에 저장된 이전 이미지가 나타나서 삽질을 좀 했는데요..

의외로 간단하게 해결이 되는군요.

<img src="파일명?cache=랜덤값">

어느 분의 블로그에서 본 건데요..

랜덤값은 계속해서 바뀌어 지는 값을 넣어주면 됩니다.
같은 값을 계속 세팅하면 그대로 캐쉬된 이전 이미지를 불러오드라구요.

근데 ?cache 가 도대체 뭐하는 녀석인지 아무리 검색해봐도 못찾겠네요. ㅡㅡ;
혹시 구체적인 소스를 아시는 분은 좀 알려주세요. ㅎㅎ