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
“무릇 물이란 지세를 따라 흐르되 작은 틈도 놓치지 않고 적시니 지혜를 갖춘 자와 같고, 움직이면서 아래로 흘러가니 예를 갖춘 자와 같으며, 어떤 깊은 곳도 머뭇거리지 않고 들어가니 용기를 가진 자와 같고 장애물이 막혀서 갇히면 고요히 맑아지니 천명을 아는 자와 같으며, 험한 곳을 거쳐 멀리 흐르지만 끝내 남을 허물어뜨리는 법이 없으니 덕을 가진 자와 같다. 천지는 이것으로 이루어지고, 만물은 이것으로 살아가며, 나라는 이것으로 안녕을 얻고, 만사는 이것으로 평안해지며, 만물은 이것으로 바르게 되는 것이다. 이것이 지혜로운 자가 물을 좋아하는 이유이다.” (한영, <<한시외전>>)