HTML/input type="file" 찾아보기 버튼 이미지로 바꾸기

input type="file" 찾아보기 버튼 바꾸기

정윤재 2010. 6. 3. 15:23

         <td width="80"><span class="style8">파일첨부</span></td>
         <td width="290">
         <input type="text" name="txt" id="txt" size="50" readonly="readonly" style="height:15px">
          </td>
           <td>
                     <table>
                      <tr>
                      <td style="overflow:hidden; width:68px; height:15px; background-image:url('/img/btn/file_search.gif');text-align:center">
        <input type="file" name="saveFile" id="saveFile" style="width:68px;height:15px;margin:0px;filter:alpha(opacity=0);opacity:0;cursor:pointer;" onchange="document.getElementById('txt').value=this.value;" value="this.value;"> 
       </td>
                      </tr>
                     </table>
             </td>


앞의 text 는  onchange 로 input type file 이 바꿀때마다 값이 바뀌고 진짜 input type
file 은 뒤에서 이미지로 대체 되는 것이다. 간단한데 이걸 왜 난 못했을까 아쉽다.