웹 페이지에서 파일을 업로드 하기 위해 INPUT태그의 file을 사용합니다.
그런데 이 태그가 정말 스타일리쉬 하지 않아요.
예전에는 찾아보기 부분을 이미지로 바꾸기 위해 file태그를 숨기고 자바스크립트의 click 명령을 사용하였습니다.
이 방법이 처음엔 아주 잘되는 듯 하였으나 안 된다던 브라우져가 많이 나와 사라져 버렸지요.
이제 다른 방법을 사용하여 찾아보기를 없애고 이미지로 바꾸는 것을 알려드리겠습니다.
사실 이 방법은 많은 웹에디터에서 사용하는 방법입니다.
방법을 설명드리면...
div 태그 안에 file 태그를 위치시킵니다. div 태그안에 그냥 위치한다면..
<div style="width:300px;height:30px;border:solid 1px red;overflow:hidden;">
<input type="file" id="fileid" name="fileid"/>
</div>
만약에 div의 width값이 30px이라면 어떻게 될까요?
위처럼 file태그의 좌측 일부만 나오게 됩니다. 원래 file태그는 width 속성이 없기때문에 조정해도 소용없습니다.
하지만 IE에서는 width 속성도 적용이 됩니다. 표준을 따라야 되겠지요?
찾아보기 버튼을 누르기 위해서는 찾아보기 버튼이 div안에 나타나게 해야 되겠지요.
<div style="border-right: red 1px solid; border-top: red 1px solid; overflow: hidden; border-left: red 1px solid; width: 50px; border-bottom: red 1px solid; height: 30px;">
<div style="width:40px;height:20px;position: absolute;overflow: hidden; ">
<input id="fileid" style="font-size: 13px; right: 0px; position: absolute; top: 0px" type="file" name="fileid" />
</div>
</div>
이제 찾아보기 버튼 대신 이미지를 위치시켜야 하는데요. 이미지대신 일단 "찾기"라는 글씨를 사용하도록
하겠습니다. 그냥 안쪽 div 태그 옆에 <font id="fileid2" style="cursor: pointer">[찾기]</font> 넣습니다.
버튼 뒤에 가려져서 안보이는데요...이제 저 찾아보기 버튼을 사라지도록 하기 위해 opacity 값을 0으로
줍니다. 그러면 안쪽 div는 투명하게 처리가 됩니다. opacity 지정방법이 ie와 다른 브라우져가 서로
다릅니다. 그래서 두개의 코드는 style속성에 넣습니다.
FILTER: alpha(opacity=0); opacity: 0
이런 방법으로 찾아보기 버튼 대신 이미지를 사용할 수 있겠지요?
찾기 위에 마우스를 올려도 cursor이 변하지 않습니다. cursor:pointer; 스타일이 적용이 되면 좋으련만...
IE는 pointer가 적용이 됩니다.
