Html & Script

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

페이지 정보

본문

현재에 보이는 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>

관련자료

등록된 댓글이 없습니다.
Today's proverb
원만한 가정은 상호간의 희생 없이는 절대 영위(營爲)되지 못한다. 이 희생은 그것을 실행하는 사람을 위대하게 하며 아름답게 한다. (앙드레 지드)