파일업로드 찾아보기 버튼을 이미지로

현재에 보이는 input type=file 부분을 Style을 이용하여 안보이게 숨겨놓고, 일반 input type=text를 하나 폼에 넣고, 그 옆에 원하는 이미지를 놓습니다. 이미지의 onClick 이벤트 부분에 javascript로 아까 숨겨두었던 input type=file 부분의 name을 이용해서 열어준 다음에 사용자가 파일을 고르게 되면 그 값을 보여주기 위해서 다시 숨겨져있던 입력폼의 값을 새로 만들었던 text 형식의입력폼에 집어 넣으면 됩니다.

말이 좀 복잡한데요. 소스를 보시면 좀 이해가 쉽구요.... 그래도 이해가 안가면, 직접 코드를 실행해 보면 이해가 쉽습니다.

<script>
    function file_browse()
    {
        document.form.file.click();
        document.form.text1.value=document.form.file.value;
    }
</script>
<p>
    <form name="form">
        <input type="file" name= "file"style="display='none';">
        <input type="text" name="text1">
    </form>

<p><a href="javascript: file_browse()">파일찾아보기</a></p>