채택완료

이미지 태그 클릭시 변경

2019-01-23 (수) 15:55:30 3,652
Copy
<img src="asdfafd.jpg" onclick="change_img();">

이런식으로해서 이미지를 바꾸려고하는데요

<input type='file'> 하면 파일 선택할수있는 창이 뜨잖아요

onclick으로 할수있는방법이있을까요?

|

답변 1개

채택된 답변
+20 포인트
2019-01-23 (수) 16:07:15

아래 소스를 참고해보세요.

input type="file"을 이용하고, css를 조정해 이미지 형태로 둔갑시킵니다.

HTML 코드

Copy
<div class="file_input">

    <label>

        File Attach

        <input type="file" onchange="javascript:document.getElementById('file_route').value=this.value">

    </label>

    <input type="text" readonly="readonly" title="File Route" id="file_route">

</div>

CSS코드

Copy
.file_input label {
    position:relative;
    cursor:pointer;
    display:inline-block;
    vertical-align:middle;
    overflow:hidden;
    width:100px;
    height:30px;
    background:#777;
    color:#fff;
    text-align:center;
    line-height:30px;
}
.file_input label input {
    position:absolute;
    width:0;
    height:0;
    overflow:hidden;
}
.file_input input[type=text] {
    vertical-align:middle;
    display:inline-block;
    width:400px;
    height:28px;
    line-height:28px;
    font-size:11px;
    padding:0;
    border:0;
    border:1px solid #777;
}

답변을 작성하려면 로그인이 필요합니다.