파일첨부 button에 style주기/ input type file에서 파일명만 나오게

파일첨부 button에 style주기/ input type file에서 파일명만 나오게

기본적인 파일첨부하기 input button은  

 

이렇게 스타일이 안예쁘죠~

 

 

원하는 디자인으로 예쁘게 파일첨부하기 버튼을 바꾸고

첨부파일이 파일경로가 다 표시되는것이 아닌 파일명만 나오게 하는 html 소스입니다.

 

<style>

.file_input_textbox{float:left}

.file_input_div{position:relative;width:100px;height:23px;overflow:hidden;}

.file_input_button{width:100px;position:absolute; top:0px; background-color:#aaa; color:#fff; border-style:solid;}

.file_input_hidden{font-size:45px; 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="fileName" class="file_input_textbox" readonly="readonly">

<div class="file_input_div">

    <input type="button" value="파일선택" class="file_input_button">

<input type="file" class="file_input_hidden" onchange="javascript:document.getElementById('fileName').value = this.value.split('\\')[this.value.split('\\').length-1]">

</div>