[Javascript] onchange (화면에 썸네일 띄우기)

오늘은 js를 통해 서버를 방문(페이지 전환)하지 않고 화면에서 처리하는 것을 포스팅하려고 한다. (비동기 처리)

 

 

위의 예시로 간단하게 3개정도 들어보면

1. 아이디 중복확인
2. 비밀번호 확인
3. 썸네일

정도가 있고, 오늘은 썸네일 비동기 처리에 대해 알아보려고 한다.

 

JSP에서 뭔가 변경이 이루어졌을 때 사용되는 명령어를 'onchange' 라고 하는데 <script>를 통해 함수를 생성하여 함께 사용할 수 있다.

 

 

 

먼저, onchange를 사용하기 위해 변경이 이루어질 곳에 onchange 명령어를 사용한다.

<form action="insertBoard.do" method="post" enctype="multipart/form-data">
	<input type="hidden" name="writer" value="${member}">
	<input type="text" name="title" required placeholder="제목 작성"> <br>
	<input type="text" name="content" required placeholder="내용 작성"> <br>
    <!-- onchange 함수 사용 -->
	<input type="file" name="fileUpload" onchange="thumbnail(event);"> <br> 
	<input type="submit" value="글 작성">
</form>

 

 

다음으로 thumbnail() 이라는 함수를 <script> 태그를 통해 생성한다.

<script>	
	function thumbnail(event) {
		var reader = new FileReader();
		reader.onload = function(event) {
			var img = document.createElement("img");
			img.setAttribute("src", event.target.result);
			document.querySelector("#thumbnailBox").appendChild(img);
        };
        reader.readAsDataURL(event.target.files[0]);
	}
</script>

 

코드를 해석해보면,

 파일을 담을 변수를 생성하고, 이미지 태그에 담을 변수를 생성한 후, 이미지 src 속성에 event.target.result를 적용한다. 다음으로 id가 썸네일 박스인 곳에 이미지를 적용시킨다. 

마지막 라인은 첫번째 사진만 출력되도록 작성한 코드이다.

 

이렇게 설정하면 비동기로 썸네일을 띄우는 방법은 끝이 난다!