이미지변경시 input file 은 감추고, 이미지 클릭시 파일선택 창 바로 띄우기 / javascript

이미지변경시 이미지 클릭하면 파일선택창 바로 띄우기

이미지를 변경하고자 할때, input 태그를 사용하면 화면에 파일선택바가 나타나게 되는데요, 아래의 빨간색 부분과 같이 해당 이미지를 클릭하면 바로 파일선택창이 뜨도록 하고 싶을때가 있습니다

 

이미지변경 파일선택창

 

 

 

 

 

 

즉, 아래와 같이 동작하게 하고 싶은경우 입니다

 

 

 

 

전체 코드는 다음과 같습니다.

간략하게 설명드리면 우선, id가 target_img인 부분이 변경하고자 하는 이미지 입니다. 그 이미지가 클릭될 경우 <form>태그 내에 있는 target_url 부분에 선택된 이미지 URL 을 세팅하고, 파일태그에 클릭이벤트를 발생시키는 겁니다.

 
$('#target_img').click(function (e) {
    document.signform.target_url.value = document.getElementById( 'target_img' ).src;
    e.preventDefault();
    $('#file').click();
});        
 
 
<div>
    <img id = "target_img" src="target_img_name.png">
</div>
 
 
<form name="signform" method="POST" ENCTYPE="multipart/form-data" action="./design_update.htm">
    <input type="file" id="file" name="file" style="display:none;" onchange="changeValue(this)">
    <input type="hidden" name = "target_url">
</form>function changeValue(obj){    document.signform.submit();}
 
 

 

 

 

이 부분이 이미지가 클릭될 경우 호출되는 곳인데요, 네번째 줄에서 파일태그에 클릭이벤트를 발생시키게 됩니다.

$('#target_img').click(function (e) {
    document.signform.target_url.value = document.getElementById( 'target_img' ).src;
    e.preventDefault();
    $('#file').click();
}); 

 

 

물론, input 태그에는 hidden 속성을 주어 화면에서 보이지 않게 하구요....

파일이 선택되게 되면 file태그에 onchange 이벤트가 발생하게 됩니다. 그때 호출하는 changeValue() 함수에서 <form>에 action 을 실행하면 됩니다.

 

 

 

<form>태그의 action 부분에서 파일을 전달받아서 파일업로드 및 DB 변경등을 진행하면 됩니다.

 

 

관리자로 로그인시 화면을 보면서 바로 이미지를 수정하는 경우에 사용하면 좋겠습니다.