JSP/HTML/Javascript - 사진 미리보기, 사진 썸네일 구현

사진 업로드를 할 때 어떤 사진이 올라가는지 파일 선택과정에서도 알 수 있지만

사진을 선택하다보면 어떤 사진을 선택했는지 헷갈릴 경우가 있다.

그럴때에는 사진 미리보기 기능으로 어떤 사진을 업로드했는지 확인한다.

 

 

<div class="form-group">
	<input class="form-control form-control-user" type="file" 
	name="product_image" id="product_image" onchange="setThumbnail(event);">
</div>
<div id="image_container"></div>
										
<div class="form-group">
	<input class="form-control form-control-user" type="file" multiple="multiple"
	name="product_detail_image" id="product_detail_image" onchange="setDetailImage(event);">
</div>
<div id="images_container"></div>

 

input type="file"으로 설정하고 여러개의 사진 업로드하려면 multiple="multiple" 속성을 추가한다.

그리고 자바스크립트를 작성한다.

 

<이미지 1개>

<!-- 이미지 미리보기 -->
	<script>
	function setThumbnail(event){
		var reader = new FileReader();
		
		reader.onload = function(event){
			var img = document.createElement("img");
			img.setAttribute("src", event.target.result);
			img.setAttribute("class", "col-lg-6");
			document.querySelector("div#image_container").appendChild(img);
		};
		
		reader.readAsDataURL(event.target.files[0]);
	}
	</script>

 

<이미지 여러개>

<script>
		function setDetailImage(event){
			for(var image of event.target.files){
				var reader = new FileReader();
				
				reader.onload = function(event){
					var img = document.createElement("img");
					img.setAttribute("src", event.target.result);
					img.setAttribute("class", "col-lg-6");
					document.querySelector("div#images_container").appendChild(img);
				};
				
				console.log(image);
				reader.readAsDataURL(image);
			}
		}
	</script>

 

자바스크립트에서 FileReader를 이용하여 파일을 <div> 안에 추가한다.

 

이미지 파일 1장

 

이미지 파일 여러장 multiple="multiple"