파일 업로드시, 비동기처리를 통해, 썸네일 기능을 구현 하기

https://hwanii96.tistory.com/338

Spring 프레임워크 MultipartFile 인터페이스

 

위의 게시글에서 Spring 프레임워크에서 제공하는 MultipartFile 인터페이스를 사용해서,

파일 업로드를 쉽고 간단하게 처리 할 수 있었다.

 

파일을 업로드 할 경우,

서버를 방문 하지 않고, 무언가 페이지의 변경사항이 생기는 것을 원한다면 ?

>> JavaScript 를 사용 한다. (JS)

 

예시)

1) 아이디 중복 확인

>> 비동기 처리 == 자바스크립트

 

2) 비밀번호 유효성 검사

>> 비동기 처리 == 자바스크립트

 

3) 썸네일

>> 비동기 처리 == 자바스크립트

 

이번 게시글 에서는 비동기처리를 통해, 썸네일 기능을 구현해 보려고 한다.

>> 페이지 전환이 일어 나지 않는다.

 

1.

JSP 에서 무언가 변경이 일어난다 == 동적 이다.

이럴때, 사용하는 속성이 onchange 이다.

onchange 속성의 값으로 함수를 작성해서,

<script> 태그 내부에 함수를 생성 하는 식으로 작성 하면 된다.

 

2.

 

<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>
	<input type = "file" name = "fileUpload" onchange = "thumbnail(event);"> 			<br>
	<input type = "submit" value = "글 작성 하기">
</form>

 

<hr>
<img alt="thumbnailImage" src="" id="thumbnailImage">
<hr>

 

<script>
	function thumbnail(input) {
		if (input.files && input.files[0]) {
			var reader = new FileReader();
			reader.onload = function(e) {
				document.getElementById('thumbnailImage').src = e.target.result;
			};
			reader.readAsDataURL(input.files[0]);
		}
		else {
			document.getElementById('thumbnailImage').src = "";
		}
    }
</script>

 

위의 함수를 해석하면 아래와 같다.

1) 파일을 담을 변수를 생성 하기.

2) 이미지 태그에 담을 변수를 생성 하고, 이미지 src 속성에 event.target.result 를 적용 한다.

3) id가 썸네일 이미지인 곳에 이미지를 적용 시킨다.

4) 마지막 배열 코드는, 첫번째 사진만 출력 되도록 작성한 코드 이다.

 

(정확 하게 분석 해봐야 할듯 ..)

 

3.

 

 

파일을 선택해서 올리면, 페이지 이동 없이,

 

 

웹 브라우저에서 사용자가 올린 파일이 올라오는 모습을 확인 할 수 있다.