1st Source
<script language="JavaScript" type="text/javascript">
function HandleFileButtonClick()
{
document.getElementById('realFile').click();
document.getElementById('fakeText').value = document.getElementById('realFile').value;
}
</script>
<input type="file" name="realFile" id="realFile" style="display:none;">
<input type="text" name="fakeText" id="fakeText" readonly="true">
<input type="button" onClick="javascript:HandleFileButtonClick();" style="background:url('버튼이미지 주소'); "/>
============================================================
실제 파일을 display:none 시키고, 버튼을 클릭하면,
<input type="file" 을 클릭한것과 같은 동작이 일어나도록 짯다.
ie6, 8, ff5.X, chrome14.X
4개 브라우저에서 태스트 해보았다.
크롬에서만 안된다.
....... 젠장..?
왜 안되는지 찾다가 보니,
크롬에서는 display:none 속성이 걸린 개체에 대하여, 어떠한 동작도 먹히지 않았다.
....... 이런..?
다른 방법으로 해결해 보고자 아래와 같은 css 와 같이 프로그램을 짜보았다.
============================================================
2nd Source
<style>
.fakeFileTxt { float: left; }
.fileDiv
{
position: relative;
/*버튼이미지 크기에 따라서 width, height 수정*/
width: 70px;
height: 30px;
/*버튼이미지 크기에 따라서 width, height 수정*/
overflow: hidden;
}
.buttonImg
{
background:url('버튼이미지 주소');
/*버튼이미지 크기에 따라서 width, height 수정*/
width:65px;
height:25px;
/*버튼이미지 크기에 따라서 width, height 수정*/
position: absolute;
top: -3px;
color: #FFFFFF;
border-style: solid;
}
.realFile
{
position: absolute;
right: 0px;
top: 0px;
opacity: 0;
filter: alpha(opacity=0);
-ms-filter: "alpha(opacity=0)";
-khtml-opacity: 0;
-moz-opacity: 0;
}
</style>
<input type="text" id="fakeFileTxt" class="fakeFileTxt" readonly="readonly">
<div class="fileDiv">
<input type="button" class="buttonImg" />
<input type="file" class="realFile" onchange="javascript:document.getElementById('fakeFileTxt').value = this.value" />
</div>
============================================================
css 핵을 이용하여,
display:none 대신
optical 을 0으로 만들었다.......
어쨋든 안보이기는 하지만, 파일필드는 존재한다....ㅡㅡ;;;
ie6, 8, ff5.X, chrome14.X 테스트 통과~!!!
아놔;;;;
display:none 이나 optical 0 나 똑같은건데...???
빌어먹을 크롬..ㅡㅡ;;;;
ie 말고 다른 브라우저 욕하기는 이번이 처음인것 같다.ㅠ
어쨋든 input type="file" button style 적용 끗~!!
반응형
