jQuery 이미지 파일 선택시 보여주기

마우스 커서를 가져가면 파일 선택 버튼이 보이고, 이미지 파일을 선택하면 해당 이미지를 화면에 보여주는 미리보기 기능을 구현하는 방법에 대해 알아보겠다.

HTML 레이아웃

<div id="imgBox" style="min-height: 400px; min-width: 580px;">
	<div id="imgTag" style="min-height: 400px; min-width: 580px; position: absolute;"></div>
	<input type="file" id="inputImg" name="outo" accept=".jpg,.png" style="position: absolute; top:181px; left: 63px; font-size: x-large;" onchange="loadFile(this)">
</div>

id 기준으로,
- imgBox : 마우스 오버를 감지할 곳이다.
- imgTag : 이미지 미리보기를 나타낼 곳이다.
- inputImg : 파일을 입력 받을 input 태그이다.
                jpg, png 형식만 accept 로 지정해 해당 확장명의 파일 선택을 유도한다.
                onchange 시 파라미터로 this 를 넘겨주며 loadFile 함수를 실행한다.

아무것도 보이지 않는 기본 상태

 

마우스 오버 감지

$('#imgBox').on('mouseover', function() {
  $('#inputImg').show();
});
$('#imgBox').on('mouseout', function() {
  $('#inputImg').hide();
});

- 마우스 커서를 올리면 파일선택 버튼 보여주고, 커서가 벗어나면 숨긴다.

마우스 커서를 올린 상태

 

미리보기 출력 함수

function loadFile(input) {
  var file = input.files[0];
  $('#imgTag').html(" <img src='"+URL.createObjectURL(file)+"' style='max-height:432px; max-width:925px;'/> ");
}

- 파일을 선택하면 실행되는 함수이다. 선택된 이미지를 나타낸다.

파일 선택한 상태